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内 容 提要 


随 着 互联 网 技术 的 不 断 发 展 壮大 ， 网 络 覆 盖 率 和 可 联网 设备 不 断 增 加 ， 用 户 对 可 访问 性 的 需求 也 与 日 
俱 增 。 本 书 是 一 本 网 页 设计 与 开发 方面 的 实用 指南 ， 介 绍 了 一 种 渐进 增强 的 编程 方法 ， 利 用 JavaScript、 高 
级 CSS 和 Ajax 制作 能 实现 高 度 交 互 体验 的 网 站 ， 同 时 还 确保 代码 库 无 需 修改 就 能 到 处 运行 。 这 个 法 则 简单 
地 说 就 是 建议 所 有 的 网 站 内 容 和 功能 都 以 语义 化 的 HTML 为 基础 ， 让 任何 有 具备 网 络 功能 的 设备 都 可 以 使 用 ， 
然后 再 在 上 面 无 颖 登 加 基于 高 级 CSS 和 JavaScript 的 增强 功能 。 

本 书 适 合 网 站 设计 和 开发 人 员 阅 读 。 
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引言 : 谈 一 谈 渐进 增强 设计 

















从 很 多 方面 看 ， 现 在 都 是 成 为 网 页 设计 师 的 最 佳 时 机 。 

新 的 网 站 和 应 用 程序 正在 以 惊人 的 速度 涌现 , 它们 改变 了 我 们 工作 、 交 流 和 生活 的 方式 。 我 
们 在 网 上 经 营 生意 ， 建 立 人 际 关 系 ， 表 达意 见 ， 自 学 各 种 知识 ， 还 找到 了 各 种 各 样 的 娱乐 方式 。 
网 页 标准 的 进步 不 断 让 网 络 变 得 更 简单 、 更 快捷 、 更 动态 和 更 强大 。“ 在 线 ” 这 个 词 已 经 摆脱 了 
“ 线 ” 的 束缚 : 具备 上 网 功能 的 手机 和 小 型 上 网 本 大 量 涌现 ， 几 乎 让 我 们 随时 随地 都 可 在 线 。 

但 是 ,这 座 巨 大 的 互联 网 宝库 存在 一 个 问题 : 虽然 高 级 交互 功能 一 般 可 以 在 支持 高 级 CSS 和 
JavaScript 功能 的 最 新 浏览 器 上 完美 运行 ,但 是 市 面 上 无 数 种 上 网 设备 ( 从 最 新 的 Kindle 或 Wii 
游戏 系统 到 各 种 老式 计算 机 和 手机 ) 对 这 些 功 能 只 提供 有 限 支 持 或 者 完全 不 支持 , 这 可 能 会 导致 
这 些 高 级 交互 功能 缺损 或 不 可 用 。 即 使 是 最 新 的 浏览 器 ,如 果 网 站 开发 者 没有 考虑 对 屏幕 阅读 软 
件 和 其 他 辅助 设备 的 支持 ， 网 站 就 无 法 服务 于 盲人 或 视 障 用 户 。 

作为 网 页 设计 和 开发 人 员 , 我 们 总 是 在 平衡 三 个 相互 有 些 冲 突 的 目标 。 我 们 想 使 用 眼前 所 有 
激动 人 心 的 新 技术 ,实现 引人入胜 的 交互 体验 ,但 同时 我 们 也 努力 确保 网 站 对 所 有 人 都 是 可 访问 、 
可 用 的 。 另外， 从 开发 的 角度 看 ， 尽 可 能 编写 最 整洁 、 最 容易 维护 的 代码 也 同样 重要 。 我 们 一 直 
在 寻找 能 在 实际 项 目 中 优雅 地 实现 所 有 这 三 个 目标 的 开发 道路 。 

令 人 高 兴 的 是 , 我 们 觉得 已 经 找到 了 这 样 一 条 路 。 本 书 是 一 本 网 页 设计 与 开发 方面 的 实用 指 
南 , 特别 注重 介绍 如 何 利 用 JavaScript、 高 级 CSS 和 Ajax 制作 能 实现 高 度 交互 体验 的 网 站 ,同时 
还 确保 代码 库 无 需 修改 就 能 到 处 运行 。 我们 的 方法 就 是 基于 一 种 叫 作 渐进 增强 的 编程 法 则 ,这 个 
法 则 简单 地 说 就 是 建议 所 有 的 网 站 内 容 和 功能 都 以 语义 化 的 HTML" 为 基础 ， 让 任何 具备 网 络 功 
能 的 设备 都 可 以 使 用 ， 然 后 再 在 上 面 无 颖 到 加 基于 高 级 CSS 和 JavaScript 的 增强 功能 。 

渐进 增强 地 开发 网 站 并 不 意味 着 花费 更 多 的 精力 , 但 它 确实 需要 你 调整 开发 流程 和 思路 。 一 
些 人 可 能 会 说 这 么 做 不 值 ， 因 为 目前 的 开发 方式 能 照顾 到 的 对 象 已 经 纤 盖 了 “大 多 数 ” 用 户 , 浏 
览 器 对 网 页 标准 支持 的 不 断 改 进 也 将 弥合 剩 下 的 用 户 缺 口 。 

然而 , 近期 的 互联 网 应 用 与 设备 发 展 趋势 告诉 我 们 ， 事 实 恰 惟 相 反 : 一 些 最 前 沿 可 上 网 设备 
的 浏览 器 对 网 页 标准 支持 不 佳 ， 同 时 , 那些 运行 着 过 时 、 简 陋 版 本 浏 览 器 的 老式 电脑 和 手机 的 数 
量 不 减 反 增 。 

































































































































































Qa 语义 化 的 HIML (semantic HTML ) 鼓励 将 HTML 标签 用 于 体现 网 页 的 实际 内 容 ， 把 页 面 美化 和 外 观 调 整 的 任务 
交 给 CSS。 一 一 译 者 注 
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和 : 谈 一 谈 渐 进 增强 设计 

















无 论 如 何 , 事实 就 是 如 此 ， 人 们 在 日 常生 活 中 使 用 各 种 各 样 的 浏览 器 、 平 台 和 设备 ， 他 们 期 
望 自己 喜爱 的 网 站 和 应 用 能 在 所 有 这 些 地 方 无 颖 运行 。 面 对 这 样 日 益 复 杂 的 设备 环境 时 , 构建 只 
能 在 少数 特定 浏览 老 上 正常 运行 的 网 站 是 不 现实 的 , 特别 是 不 要 忘 了 一 一 渐进 增强 设计 能 让 你 的 
网 站 到 处 运行 ， 并 为 所 有 人 服务 。 

不 过 , 我 们 知道 单 任 这 些 无 法 说 服 持 怀 疑 态度 的 人 。 所 以 接 下 来 看 看 全 球 网 络 受众 和 现 有 技 
术 的 真实 现状 , 并 探究 一 下 常见 编程 方法 可 能 导致 的 问题 ( 轻 则 导致 小 小 的 不 便 , 重 则 导致 功能 
完全 不 可 用 )。 


前 所 未 有 的 网 络 世界 


我 们 很 容易 忘记 互联 网 发 展 壮大 的 速度 有 多 快 ， 以 及 它 对 我 们 生活 的 改变 多 么 明显 。 仅 在 
10 年 前 ， 网 络 访问 还 局 限 在 相当 狭窄 的 用 户 范围 中 ， 而 且 用 户 通常 都 用 着 相当 一 致 的 硬件 。 今 
天 ， 互 联网 成 了 真正 的 全 球 现象 ， 用 户 越 来 越 多 样 ， 用 户 所 使 用 的 上 网 设备 也 五 花 八 门 。 

通过 追踪 并 了 解 现在 谁 在 上 网 、 通 过 什么 途径 上 网 ， 以 及 未 来 的 增长 最 有 可 能 来 自 何 处 , 我 
们 就 能 更 好 地 制定 计划 ， 迎 接 这 个 网 络 无 处 不 在 、 人 人 都 会 上 网 的 新 世界 。 


所 有 人 都 〈 或 不 久 即将 ) 上 网 了 


20 世纪 90 年 代 中 期 ， 互 联网 浪潮 兴起 之 初 ， 大 多 数 互 联网 用 户 都 居住 在 更 为 富裕 的 西方 国 
家 ， 他 们 受过 教育 ( 因为 当时 上 网 需要 一 定 的 技术 能 力 )， 而 且 很 可 能 是 专业 人 土 或 者 富 人 ， 
为 装载 系统 的 PC 价格 远 远 超出 了 普通 人 的 承受 能 力 ， 况且 还 需要 昂贵 的 包月 上 网 套餐 和 强大 的 
基础 设施 。 

在 过 去 的 10 年 中 ， 计 算 机 越 来 越 好 用 ， 硬 件 、 软 件 和 上 网 费用 的 大 幅 下 降 也 让 网 络 触手 可 
及 。 正 因为 如 此 ， 网 络 用 户 已 经 全 球 化 , 覆盖 了 所 有 的 年 龄 段 、 教 育 程度 和 社会 阶层 ， 这 使 得 网 
上 的 信息 和 工具 更 加 大 众 化 。 

欣欣 向 荣 的 互联 网 普及 进程 不 断 吸 引 着 世界 各 个 角落 的 人 上 网 冲浪 ,全球 互联 网 用 户 的 数量 
增长 已 经 超过 450%。 从 2000 年 12 月 的 3.61 亿 人 增加 到 2013 年 10 月 (www.internetworldstats.com/ 
stats.htm， 截 至 2012 年 6 月 30 日 ) 的 24 亿 人 (超过 世界 人 口 总 数 的 34% )。 全 球 各 地 都 出 现 了 
迅猛 的 增长 : 非洲 互联 网 用 户 从 450 万 增加 到 1.6 亿 , 亚洲 用 户 从 1.14 亿 到 10.7 亿 ,欧洲 用 户 从 
1.05 亿 到 5.18 亿 (www.internetworldstats.com/stats.htm， 截 至 2012 年 6 月 30 日 )。 

在 美国 ， 互 联网 用 户 在 过 去 10 年 间 越 来 越 多 样 化 ， 超 过 92% 的 18 岁 至 29 岁 人 群 和 近 半 数 
的 中 老年 人 都 已 上 网 ,网 民 的 教育 和 收入 水 平 更 是 千差万别 。 互 联网 正 迅 速 变 得 无 所 不 在 : 超过 
73% 的 美国 成 年 人 称 自己 使 用 互联 网 和 电子 邮件 ，50% 以 上 的 农村 地 区 已 经 联网 ( 根据 Pew 研究 
中 心 的 “互联 网 与 美国 生活 ”项 目 : www.pewinternet.org )， 接 人 互联 网 的 公立 小 学 教室 已 达 93% 
(根据 美国 教育 部 全 国教 育 统计 中 心 2006 年 发 布 的 “美国 公立 学 校 和 教室 的 互联 网 接 入 情况 : 
1994—2005”。NCES 2007-020 )。 

不 过 ， 最 有 意思 的 可 能 还 是 以 下 这 些 事 实 : 虽然 亚洲 有 7.98 亿 网 民 , 但 互联 网 渗透 率 还 不 
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到 总 人 口 的 28% ,非洲 的 6690 万 则 不 到 16% , 而 美国 和 大 多 数 西 欧 国家 基本 都 在 70%~80% 之 间 。 
随 着 互联 网 接 人 程度 的 提高 ， 最 大 的 潜在 增长 区 域 更 有 可 能 来 自 于 美国 之 外 。 相 对 于 西方 ,东方 
和 欧洲 的 用 户 不 但 有 着 不 同 的 语言 和 文化 ,而 且 他 们 的 设备 、 上 网 方式 、 基 础 设施 和 使 用 期 望都 
会 很 不 一 样 o 


不 断 提升 的 用 户 期 望 


伴随 着 全 球 用 户 和 可 上 网 设备 数量 的 巨大 增长 , 今天 的 互联 网 在 提供 些 什么 方面 也 发 生 了 同 
样 显著 的 变化 。 创新 的 网 页 内 容 和 交互 手段 加 在 一 起 , 让 用 户 对 网 站 行为 和 功能 的 期 望 发 生 了 根 
本 性 的 改变 。 下 面 列举 了 自 2000 年 以 来 ， 用户 需求 发 生 的 一 些 变化 。 
PP Amazon、eBay 和 Netflix 等 在 线 运营 的 成 功 企 业 引 入 了 层次 更 丰富 的 网 页 内 容 、 内 山 媒 体 、 
动态 交互 方法 和 沉浸 式 体验 ， 为 用 户 体验 设置 了 新 的 标准 。 
做 用 户 自 创 内 容 的 涌现 (博客 、YouTube、Facebook 、Digg、Twitter 等 ) 让 网 站 的 内 容 和 结 
构 向 大 众 化 转变 ， 而 且 还 提高 了 用 户 的 期 望 值 : 能 够 根据 自己 的 需要 创建 、 引 用 和 有 创 
意 地 调用 网 络 内 容 。 
> 实时 互联 网 让 用 户 期 待 获得 新 鲜 到 秒 的 即时 更 新 ， 包 括 他 们 在 Facebook 上 的 社交 网 络 、 
Twitter 上 的 关注 者 和 Google Docs 或 Google Wave 上 的 协作 者 。 这 种 期 望 促使 网 站 行为 发 生 
了 很 大 的 转变 ， 从 基础 的 静态 页 面 切 换 转 癌 基 于 Ajax 的 环境 ， 从 而 几乎 不 再 需要 进行 传 
统 的 页 面 刷新 。 
> 网 络 应 用 程序 尝试 在 浏览 器 里 提供 与 桌面 程序 同等 质量 的 用 户 体验 ， 包 括 复杂 数据 可 视 
化 、 拖 放手 势 和 丰富 的 交互 手段 。 这 类 程序 的 兴起 符合 将 软件 作为 网 络 服务 提供 的 总 体 
趋势 ， 以 代替 在 计算 机 上 安装 的 传统 形式 。 
> 现在 的 用 户 会 使 用 工作 场所 和 家 里 的 多 种 泉 面 浏览 絮 上 网 ， 出 门 时 则 使 用 手机 等 设备 。 
他 们 期 望 可 以 用 任何 设备 随时 访问 自己 的 数据 。 
这 些 新 变化 让 互联 网 成 为 强大 的 全 球 平台 , 能 在 浏览 器 里 提供 类 似 桌 面 应 用 程序 的 特性 和 功 
EE， 使 所 有 用 户 都 能 获得 实时 通信 的 能 力 。 


不 断 增 长 的 用 户 可 访问 性 需求 


在 线 人 口 明 显 变 得 越 来 越 多 样 化 , 特别 是 年 长 用 户 的 比例 增加 , 再 加 上 前 沿 网 站 里 涌现 出 大 
量 的 新 交互 模型 ， 影 响 网 站 设计 的 考虑 因素 就 又 多 了 一 层 。 

随 着 年 龄 的 增长 ， 人 的 视力 、 听 力 和 运动 能 力 会 下 降 或 受 损 ， 而 这 一 切 都 对 他 们 能 否 顺利 进 
行 网 上 冲浪 有 重要 影响 。 和 白内障、 失明 、 听 力 障 但、 关节 灵活 性 下 降 、 精 细 动 作 控制 能 力 丧 失 或 
手 部 颤动 等 病症 ， 会 让 一 个 传统 网 站 面临 难于 使 用 或 更 严重 的 问题 。 

这 些 年 长 用 户 可 能 需要 更 大 的 字号 和 对 比 度 , 特别 是 在 长 时 间 阅 读 时 。 网 站 应 当 支 持 调 整 文 
本 设置 以 满足 他 们 的 需求 , 这 点 至 关 重 要 。 许 多 失明 或 视力 重度 受 损 的 用 户 在 他 们 的 桌面 电脑 上 
利用 屏幕 阅读 软件 等 辅助 技术 阅读 应 用 程序 内 容 和 网 页 。 顺利 使 用 屏幕 阅读 器 上 网 的 关键 是 : 有 
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合理 组 织 的 语义 内 容 和 完整 的 键盘 支持 , 这 样 导 航 就 无 需 视力 或 鼠标 了 。 而 那些 灵活 度 受 损 的 用 
户 用 键盘 导航 通常 也 会 比 用 鼠标 更 有 控制 感 。 

1998 年 ， 美 国联 邦 政府 通过 了 508 条 款 ( Section 508 )， 这 部 复 健 法 案 ( Rehabilitation Act ) 
的 修正 案 要 求 联 邦 机 构 确保 自己 的 电子 和 信息 技术 能 够 供 残 障 人 士 使 用 , 并 确立 了 针对 生理 和 心 
理 残 疾 人 士 数字 媒体 可 访问 性 的 国家 标准 。 虽 然 这 些 规则 仅 适 用 于 政府 机 构 和 为 联邦 政府 提供 商 
品 和 服务 的 企业 , 但 508 条 款 为 向 所 有 用 户 提 供 访 问 服务 提供 了 一 套 清晰 且 可 施行 的 标准 , 并 已 
经 作为 一 套 事实 上 的 法 律 标 准 同时 被 许多 私人 组 织 采 用 。 

万 维 网 联盟 ( World Wide Web Consortium，W3C ) 一 直 非 常 积极 地 通过 Web 可 访问 性 倡导 
组 织 (Web Accessibility Initiative，WAI ) 以 及 相关 项 目 创建 Web 可 访问 性 规范 。W3C 的 “Web 
内 容 可 访问 性 指南 ”( Web Content Accessibility Guidelines，WCAG 2.0 ) 既 提 供 了 宏观 的 原则 ， 
也 给 出 了 包含 具体 指南 和 标准 的 检查 清单 ， 以 确保 网 站 可 被 访问 。“ 可 访问 富 互 联网 应 用 ” 
( Accessible Rich Internet Application，WAI-ARIA ) 规范 提供 了 一 套 可 以 被 添加 进 标记 语言 ( 比如 
HTML ) 的 属性 , 以 一 种 能 被 屏幕 阅读 器 理解 的 方式 描述 滑动 条 ( slider ) 和 树 形 控件 ( tree control ) 
等 高 级 UI 组 件 。 

这 些 进展 综合 起 来 既 包 括 了 明确 的 要 求 , 又 提供 了 一 套 工具 让 今天 的 用 户 不 论 身体 状况 如 何 
都 能 上 网 获得 完整 的 信息 。 所 有 的 开发 者 都 应 该 重视 将 辅助 功能 加 入 网 站 并 在 屏幕 阅读 器 上 测 
试 ， 因 为 缺乏 可 访问 性 在 用 户 腿 里 意味 着 歧视 ， 在 法 律 层面 可 能 也 是 如 此 。 

举 个 塔 吉 特 公司 的 例子 。2005 年 初 , 美国 盲人 联合 会 ( National Federation for the Blind, NFB ) 
来 到 了 塔 吉 特 公司 , 提醒 他 们 网 站 上 的 一 些 功能 许多 残障 用 户 无 法 使 用 , 塔 吉 特 公司 声称 他 们 的 
实体 店 足 以 满足 那些 用 户 的 访问 需求 。 出 于 对 塔 吉 特 公司 回应 的 不 满 ，NFB 在 2006 年 2 月 对 该 
公司 提起 诉讼 ， 援 引 1990 年 的 美国 残疾 人 法 案 指 控 其 违法 。 经 过 数 年 的 法 庭 斗 争 ， 该 案 在 2009 
年 8 月 达成 和 解 ， 条件 是 塔 吉 特 公司 支付 600 万 美元 的 和 解 金 ， 负 担 NFB 将 近 380 万 美元 的 法 
律 费用 ， 并 且 同 意 大 幅 修改 其 网 站 以 引入 辅助 功能 ，NFB 还 将 定期 对 网 站 进行 可 用 性 测试 。 

虽然 这 样 的 诉讼 很 罕见 , 但 这 样 的 案例 足以 说 明 在 设计 和 开发 中 应 重视 可 访问 性 。 创 建 通 用 
可 访问 网 站 的 原则 和 规范 正在 不 断 完善 。 随 着 网 络 逐 渐 大 众 化 , 我 们 设计 和 编写 代码 的 目标 必须 
是 通用 可 访问 性 : 一 个 不 分 语言 、 文 化 、 年 龄 、 身 体 状 况 或 技术 平台 ， 所 有 人 都 能 用 的 互联 网 。 


移动 互联 网 的 兴起 


随 着 网 络 受 众 、 用 户 期 望 和 在 线 内 容 标 准 的 不 断 进化 ,用 户 上 网 的 地 点 和 方式 也 在 发 生变 化 ， 
特别 是 出 现 了 具备 上 网 功能 的 手机 、 视 频 游戏 系统 以 及 专门 用 于 上 网 的 设备 。 

截至 2008 年 ,全球 14 亿 互联 网 用 户 中 是 有 75% 通 过 移动 设备 上 网 , 而 非 桌 面 端的 浏览 器 独 
占 了 29% 的 全 球 互联 网 流量 (Tomi Ahonen,， Thought Piece: Mobile Telecoms Industry Size，2009， 
www.tomiahonen.com )。 手 机 的 普及 速度 比 人 类 发 明史 上 其 他 任何 技术 都 要 快 ， 而 我 们 才刚 刚 感 
受到 它 对 网 络 设计 方式 的 冲击 。 

动 互联 网 早期 的 手机 屏幕 小 , 处 理 器 速度 慢 , 而 且 只 理解 XML 的 一 种 简化 版 本 , 名 为 WML 
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(Wireless Markup Language, 无 线 标记 语言 )。 很 少 有 开发 者 或 用 户 期 望 网 站 能 在 这 些 设备 上 无 缝 
运行 。 

第 一 波 具备 上 网 功能 的 “智能 手机 ”在 2000 ~ 2002 年 左右 登 上 舞台 ， 包 括 诺基亚 9210 
Communicator、Palm Treo 、 第 一 代 RIM 黑莓 和 微软 Windows CE 设备 ， 它 们 将 用 户 对 实时 访问 
数据 和 功能 的 期 待 提升 到 了 一 个 新 水 平 。 这 些 设 备 能 访问 标准 HIML 网 站 ， 甚 至 还 初步 支持 了 
JavaScript 和 CSS。 很 快 ， 数 以 百 计 〈 毫 不 夸张 ) 能 访问 “真正 ”互联 网 的 不 同型 号 手机 涌现 出 
来 ， 引 发 了 移动 互联 网 革命 。 

截至 2009 年 ， 主 动手 机 订阅 数 已 经 达到 46 亿 (“Explaining 4.6 billion mobile phone subscriptions 
on the planet” ,Communities Dominate Brands blog ，11/6/09，http://t.cn/zRljrXB )， 这 一 数字 使 当 
前 互联 网 用 户 总 数 相 形 见 纳 。 虽然 不 是 所 有 这 些 移动 设备 都 有 智能 手机 那样 的 网 络 浏览 器 , 但 公 
人 允 地 说 ， 移 动 端 是 一 个 巨大 且 还 在 增长 的 市 场 ， 建 立 网 站 时 不 能 忽视 。 

甚至 连 “ 移 动 设备 ”的 定义 也 在 持续 进化 和 改变 ， 额 括 了 可 上 网 的 触 屏 平板 电脑 、 微 型 笔记 
本 电脑 和 其 他 电子 设备 。 每 种 设备 都 有 自己 独一无二 的 一 套 浏览 器 特性 、 插 件 支持 、 内 置 字体 、 
屏幕 尺寸 和 交互 标准 , 从 RIM 黑 每 的 拇指 滚轮 和 键盘 交互 ,到 亚马逊 Kindle 的 微型 授 杆 控制 絮 ， 
再 到 苹果 iPhone 的 多 点 触摸 交互 模型 ， 等 等 。 

一 大 批 像 任天堂 Wii, 索尼 Playstation 3 和 微软 Xbox 这 样 的 视频 游戏 系统 都 内 置 有 网 页 浏览 
器 , 这 些 系 统 自作 主张 地 将 网 站 设计 “改编 ”成 可 以 用 游戏 控制 器 在 3 米 之 外 的 电视 屏幕 上 浏览 。 
其 他 的 消费 电子 设备 ( 电子 书 阅读 器 、 电 视 机 、 家 用 电话 机 ， 其 至 是 收音 机 闹钟 和 冰箱 ) 也 正在 
加 入 网 页 浏览 器 。 我 们 的 设计 将 会 出 现在 呈 爆 炸 性 增长 的 多 样 化 设备 上 。 


设备 和 浏览 器 的 “保质 期 ” 越 来 越 长 


对 每 一 台新 购买 的 电脑 、 手 机 或 者 电子 设备 而 言 , 它 很 有 可 能 会 取代 一 台 老 旧 设 备 , 后 者 则 
被 回收 到 技术 “食物 链 ” 的 下 游 。 数 百 万 的 手机 和 电脑 仍然 在 工作 ， 它 们 或 者 在 家 庭 内 传递 ,在 
学 校 和 社区 中 心 公 用 ,或 者 被 捐赠 给 各 种 社会 组 织 ， 其 中 许多 最 终 会 通过 捐赠 给 NGO 
( Non-Governmental Organization， 非 政府 组 织 或 民间 组 织 ) 在 遥远 的 国家 落脚 。 在 物资 回收 和 重 
新 利用 非常 普遍 的 发 展 中 国家 里 , 绝 大 多 数 设备 都 被 精心 保养 , 使 用 时 间 远 超 西 方 国 家 中 通常 的 
“可 使 用 ”寿命 。 每 过 一 年 ， 家 庭 、 图 书馆 、 学 校 和 网 吧 里 运行 “过 时 ”浏览 器 的 机 器 数量 都 在 
持续 增长 。 

除了 当前 这 一 大 堆 轮 奉 中 的 老式 设备 之 外 , 同样 还 有 一 批 运行 在 非 主流 操作 系统 上 的 "边缘 ” 
浏览 锅 。 基 于 Unix 的 操作 系统 经 常 被 用 于 廉价 电脑 ， 比 如 上 网 本 、 微 型 笔记 本 和 “每 个 孩子 一 
台 笔 记 本 ”( One Laptop Per Child，OLPC ) 项 目 里 的 XO 电脑 。 高端 技 术 用 户 经 常 使 用 基于 Unix 
的 电脑 运行 多 种 “ 非 主流 ”浏览 器 (例如 Konqueror ) 以 及 Lynx 这 样 基于 纯 文本 的 浏览 器 ， 后 者 
与 主流 浏览 器 渲染 页 面 的 区 别 非常 大 。 每 一 种 浏览 器 单独 来 看 可 能 只 占据 了 微不足道 的 份额 , 但 
它们 合 起 来 形成 了 全 世界 数 以 百 万 计 的 网 络 访问 者 。 

今天 , 庞大 而 多 样 的 上 网 人 群 , 正 在 转变 的 用 户 体验 预期 ， 以 及 爆炸 性 增加 旦 需要 我 们 支持 
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的 可 上 网 设备 ， 导 致 我 们 设计 和 开发 的 复杂 程度 几乎 呈 指 数 级 增长 。 

通常 的 开发 方式 只 针对 有 最 新 和 最 流行 桌面 浏览 器 的 目标 群体 , 却 忽 略 了 其 他 人 。 这 种 方式 
肯定 会 给 数 百 万 潜在 的 读者 、 顾 客 、 求 职 者 、 婚 恋 交 友 者 或 政治 支持 者 造成 缺损 和 无 法 使 用 的 体 
验 。 同 时 我 们 也 能 理解 ， 桌面 浏览 器 、 手 机 、 游 戏 系统 和 其 他 专用 设备 的 数量 和 种 类 大多， 对 于 
任何 一 名 开发 者 而 言 ， 哪怕 只 在 其 中 一 小 部 分 设备 上 进行 网 站 测试 和 调试 ， 都 很 有 难度 ， 因 为 时 
间 和 精力 总 是 有 限 的 。 

如 果 你 还 不 相信 用 标准 的 方式 开发 最 先进 的 网 站 存在 问题 , 就 请 参考 现 有 网 站 下 面 这 些 失败 
的 真实 案例 。 














Web 2.0 的 地 雷 


Web 2.0 网 站 和 应 用 程序 在 过 去 10 年 爆炸 性 增长 ， 其 中 许多 特别 有 趣 和 迷人 的 功能 来 自 
JavaScript 对 富 交互 性 的 支持 、Ajax 的 动态 数据 能 力 和 高 级 CSS 特性 。 

这 些 进 步 伴随 着 过 去 10 年 里 数 十 个 不 同 桌 面 浏 览 器 版 本 的 发 布 ， 这 还 不 包括 近 几 年 层 出 
穷 的 可 上 网 设备 和 和 手机。 虽然 许多 当代 浏览 器 拥护 Web 标准 ， 它 们 ed 
加 在 一 起 就 要 求人 们 运用 一 系列 复杂 的 编程 、 测 试 和 时 不 时 的 修补 手段 , 才 外 让 网 站 的 显示 和 运 
行 方 式 保 持 一 致 。 

许多 网 页 设计 和 开发 的 趋势 正在 破坏 互联 网 的 基石 一 一 普遍 可 访问 。 


浏览 器 的 狭窄 视野 


为 了 能 掌控 现实 的 开发 和 测试 ， 所 有 企业 和 个 人 开发 者 ( 包括 我 们 自己 ) 都 将 编程 和 测试 的 
焦点 集中 在 一 组 特定 的 浏览 器 上 。 从 发 行 合 约 的 角度 看 ， 这 是 合理 的 : 客户 要 求 我 们 (书面 ) 承 
诺 我 们 的 显示 和 工作 方式 与 设计 完全 一 致 , 而 我 们 知道 不 是 每 种 浏览 器 都 能 处 理 一 个 现代 网 站 设 
计 所 需 的 样式 和 脚本 。 因 此 我 们 合约 的 一 部 分 规定 , 根据 一 组 事先 确定 的 浏览 需 或 运行 环境 进行 
代码 测试 ， 具 体 的 浏览 器 和 环境 视 不 同 的 项 目 而 定 。 

但 是 , 那些 没有 使 用 受 支 持 浏 览 咒 的 用 户 怎么 办 ? 是 否 可 以 将 他 们 挡 在 网 站 外 面 ， 只 显示 一 

条 请 他 们 升级 浏览 需 的 消息 ? 许多 人 不 升级 他 们 的 浏览 器 ,可 和 外 因为 他 们 对 技术 的 理解 还 不 足以 
完成 升级 ， 或 者 是 出 于 安全 原因 不 被 允许 在 他 们 的 机 器 上 安装 软件 〔 尤 其 是 在 企业 环境 里 ) 或 
者 是 因为 某 个 他 们 离 不 开 的 网 络 应 用 程序 只 能 在 旧式 浏览 器 上 运行 ， 所 以 不 得 不 用 它 。 

你 很 容易 把 那些 使 用 不 受 支 持 浏览 锅 的 用 户 看 得 无 足 轻重 ， 因为 他 们 的 比例 微乎其微， 或 者 
你 认为 他 们 一 般 都 不 够 懂行 或 技术 不 熟练 , 因此 不 属于 目标 用 户 。 但 差劲 的 浏览 锅 性 能 并 不 只 限 
于 过 时 的 浏览 需 或 者 卢 德 派 ": 亚马逊 的 Kindle 通常 被 认为 是 一 款 “ 高 精 尖 ” 设 备 ， 用 户 属于 很 
挑剔 的 早期 使 用 者 ， 但 它 的 浏览 器 是 黑白 显示 和 基于 文本 的 ， 仅 仅 “ 实 验 性 ”地 提供 有 限 CSS 





















































































































































Q 卢 德 派 ( Luddites ) 是 19 世纪 英国 的 一 一 群 技术 束 练 的 纺织 工 -人 ， 他 们 抗议 工业 革命 带 来 的 机 械 化 使 他 们 失业 。 
来 泛 指 那些 反对 技术 进步 和 产业 调整 的 人 。 译 者 注 
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和 JavaScript 支持 。 

通过 检测 用 户 代 理 (useragent ) 信息 将 访问 限制 于 一 组 特定 的 目标 浏览 器 ， 从 原理 上 看 是 不 
可 靠 的 。 举 个 例子 , 流行 的 黑 葡 智 能 手机 有 许多 型 号 都 提供 了 一 项 偏好 设置 ,允许 用 户 将 他 们 的 
浏览 器 标 问 1 为 黑莓 、 火 狐 或 者 Internet Explorer， 目 的 就 是 为 了 绕 过 开发 者 设置 的 这 些 障碍 。 

这 就 造成 了 在 一 些 | 情况 下 开发 者 误 以 为 他 们 阻挡 了 所 有 的 “ 坏 ” 浏 览 器 ， 从 而 可 能 会 在 
JavaScript 和 CSS 的 使 用 上 更 加 大 胆 ， 最 终 导致 那些 修改 偏好 设置 以 获得 访问 权 的 用 户 面 临 非常 
糟糕 的 体验 。 

受 文 持 浏览 器 列表 这 个 概念 还 过 度 简 化 了 许多 别 的 假设 : 开发 者 通常 假设 受 支 持 的 浏览 器 会 
开启 所 有 功能 ,比如 图 像 、CSS、cookies、JavaScript 和 各 种 插件 ( 比如 Flash 、Java 或 Silverlight )， 
而 且 所 有 这 些 开 启 的 功能 都 会 如 他 们 期 望 的 那样 工作 。 如 果 某 一 位 用 户 使 用 受 支 持 的 浏览 器 , 但 
因为 安全 或 隐私 原因 决定 禁用 cookies 或 JavaScript 怎么 办 ? 如 果 另 一 位 用 户 为 了 加 快 网 页 载 人 
速度 ， 在 移动 设备 上 禁用 了 CSS 或 图 像 又 该 怎么 办 ?” 当 开发 者 估计 所 选择 的 受 支 持 浏览 器 列表 
将 能 覆盖 95% 的 网 络 总 人 口 时 ， 他 们 忽略 了 在 某 些 情况 下 虽然 用 户 理论 上 用 着 受 支 持 的 浏览 器 
却 已 禁用 了 一 种 对 设计 至 关 重 要 的 功能 。 

在 现实 世界 里 ， 代 码 失效 的 频率 很 可 能 远 比 开发 者 知道 (或 者 愿意 承认 ) 的 要 高 ， 因 为 绝 
大 多 数 测试 都 是 在 相对 安全 和 受 控 的 环境 中 进行 的 : 一 组 有 限 的 现代 浏览 吉 ， 使 用 默认 设置 ， 
以 “典型 ”的 屏幕 分 辨 率 显 示 ， 字 体 大 小 也 是 默认 值 。 而 现实 世界 的 不 可 预测 性 和 多 样 性 要 复 
杂 得 多 。 只 考虑 一 小 组 “目标 ”浏览 器 营造 了 一 种 虚假 的 安全 感 。 这 种 “狭窄 的 视野 ”使 我 们 
无 法 真正 看 到 所 有 那些 需要 我 们 支持 的 浏览 器 和 设备 , 或 想方设法 使 我 们 的 代码 更 加 兼容 和 无 
懈 可 击 。 


“需要 JavaScript” 可 能 会 排斥 许多 用 户 


现在 , 很 多 网 站 的 关键 功能 依赖 于 J Aa 生成 页 面 内 容 或 者 提交 和 验证 表 
单 ， 这 就 意味 着 如 果 脚 本 功能 不 可 用 ， 整 个 页 面 或 功能 可 能 就 会 彻底 失效 。 

如 果 你 搜索 一 下 启用 JavaScript We 得 到 的 结果 会 是 85% ~ 98%。 
W3schools 的 浏览 如 统计 网 站 是 被 引用 得 最 多 的 数据 来 源 , 它 佑 计 大 约 有 5% 的 互联 网 用 户 禁 用 
了 JavaScript。( 根据 当前 的 互联 网 使 用 率 , 这 就 相当 于 大 约 8300 万 人 1 ) 与 我 们 合作 的 一 些 客 
户 使 用 的 是 自 定义 的 企业 浏览 器 设置 ， 里 面 出 于 安全 原因 选择 性 修改 或 禁用 了 一 些 JavaScript 
功能 。 这 些 浏览 器 会 正常 地 “登记 ”为 JavaScript 已 启用 ， 但 不 是 所 有 的 网 站 或 页 面 都 能 正常 
工作 。 

许多 流行 的 JavaScript 和 Ajax 驱动 的 网 站 ， 包 括 Adobe 的 电子 商店 、 旅 行 预定 网 站 Kayak 
和 项 目 管理 工具 Basecamp 直接 需要 JavaScript 来 实现 核心 功能 ， 如 果 脚 本 功能 没有 启用 则 会 显 
示 一 条 错误 消息 。 

这 些 错误 消息 通常 告知 用 户 需 要 启用 脚本 功能 并 使 用 受 支 持 的 浏览 器 。 但 是 如 果 某 人 正在 机 
场 ,需要 查询 别 的 航班 或 者 某 个 项 目的 状态 ,用 的 却 是 不 支持 JavaScript 的 旧型 号 黑 侮 或 Palm Treo 
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手机 怎么 办 ? 下载 一 款 新 的 浏览 器 不 具备 可 行 性 。 

数量 惊人 的 大 型 电子 商务 网 站 将 带 来 收入 的 关键 功能 制作 成 只 有 在 脚本 功能 可 用 时 才能 正 
常 工 作 。 在 2009 年 秋季 重新 上 线 的 Sears.com 网 站 上 , 一 位 顾客 搜索 某 个 商品 或 导航 至 任何 商品 
列表 页 (比如 家 庭 一 电器 一 微波 炉 一 桌 上 型 ) 而 没有 JavaScript 时 ， 本 应 显示 商品 的 结果 区 域 会 
保持 空白 ， 只 有 一 个 Ajax 的 “ 载 和 中” 动画。 

这 张 页 面 只 输出 了 一 个 用 于 占 位 的 旋转 动画 , 很 明显 是 打算 在 页 面 载 人 后 , 通过 一 个 Ajax 请 
求 获 得 一 个 商品 列表 来 替换 它 ， 而 刚 载 人 时 的 页 面 上 没有 任何 有 意义 的 标记 。 搜索 过 滤器 和 推荐 
商品 版 块 也 依赖 JavaScript。 对 那些 没有 脚本 功能 的 用 户 而 言 ，Sears 的 网 站 完全 违背 了 它 的 主要 
目的 : 帮助 人 们 搜索 和 购买 商品 。 

假设 这 只 是 一 种 孤立 情况 , 还 能 让 人 得 到 些许 安奈 , 但 是 事实 上 这 个 问题 广泛 存在 。 在 目前 
的 沃尔玛 网 站 ( Walmart.com ) 上 ， 每 个 “添加 到 购物 车 ”按钮 都 是 用 Ajax 添加 到 页 面 上 的 ， 没 
有 JavaScript 就 不 会 有 与 购物 相关 的 按钮 。Toys R Us 和 The North Face 两 家 网 站 的 商品 详情 页 上 
都 有 一 个 “添加 到 购物 车 ”按钮 ， 但 是 点 击 那个 按钮 会 调用 一 个 JavaScript 函数 ， 如 果 浏 览 右 禁 
用 了 脚本 功能 就 不 会 执行 任何 操作 。 

所 有 这 些 创 收 机 会 都 可 以 避免 错失 : 只 需 在 页 面 上 放 一 个 可 用 的 “添加 到 购物 车 ”按钮 ， 然 
后 提交 一 张 简单 的 表单 即 可 。 


假定 CSS 支 持 是 另 一 个 潜在 的 故障 点 


假定 浏览 器 支持 CSS (无 论 是 否 同时 支持 JavaScript )， 同 样 会 引入 另外 一 大 堆 洪 在 问题 。 

许多 旧版 桌面 浏览 器 泻 染 CSS 时 并 不 遵循 Web 标准 。 在 Palm Treo 和 旧 款 黑 芍 等 流行 的 智能 
手机 上 ， 用 户 经 常会 因为 浏览 器 的 CSS 支持 太 差 而 完全 禁用 CSS。 我 们 有 时 会 见 到 网 页 使 用 了 
复杂 而 高 级 的 CSS 并 输出 给 每 一 台 设 备 。 当 网 页 被 缺乏 CSS 支持 或 支持 不 住 的 浏览 右 不 正确 地 
渲染 后 ， 看 上 去 可 能 与 预期 不 符 ， 而 且 如 果 网 页 元 素 最 终 被 错误 摆 放 或 者 呈现 难以 阅读 的 样式 ， 
部 分 或 整 张 网 页 就 可 能 变 得 无 法 使 用 。 

更 糟 的 是 ， 开 发 者 有 时 会 依靠 JavaScript 来 添加 或 操控 CSS 样式 以 实现 网 页 功能 。 这 是 一 个 
篆 见 的 故障 点 : 如 果 CSS 或 者 JavaScript 其 中 一 个 没有 得 到 恰当 的 支持 ， 泻 染 后 的 网 页 就 可 能 不 
可 用 ， 无 论 表面 之 下 的 标记 结构 多 么 干净 漂亮 都 没有 意义 。 

在 福特 汽车 的 主页 (www.fordvehicles.com ) 上 ， 全 局 导航 条 和 底部 链接 都 依赖 JavaScript 将 
它们 摆 放 到 正确 的 页 面 位 置 上 。 如 果 没 有 脚本 功能 , 全 局 导航 不 可 见 ， 底 部 导航 链接 则 被 放置 在 
主要 产品 图 像 的 上 方 ， 使 大 部 分 网 页 区 域 难以 阅读 和 无 法 使 用 。 

耐克 的 国际 登陆 页 面 (Nike.com ) 有 一 张 使 用 JavaScript 和 Flash 的 国家 列表 ,用 于 引导 顾客 
进入 某 个 特定 国家 的 网 站 。 脚 本 功能 被 禁用 时 , 顾客 看 到 的 只 有 一 张 黑色 的 空白 页 面 ,导致 他 们 
完全 无 法 购物 。 讽 刺 的 是 ， 这 张 网 页 的 HTML 源 代码 里 有 着 完全 可 用 的 各 个 国家 链接 ， 但 却 用 
硬 编码 的 CSS 隐藏 起 来 ， 以 实现 他 们 认为 每 个 人 都 能 看 到 的 JavaScript 体验 。 这 个 简单 的 决策 每 
天 都 会 让 耐克 失去 不 计 其 数 的 潜在 顾客 。 
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插件 黑 盒 


Flash 、Silverlight 和 Java 这 样 的 插件 在 开发 者 和 许多 用 户 中 很 流行 ， 它们 能 提供 强大 的 功能 
( 比如 可 视 化 交互 图 表 、 地 图 和 其 他 信息 )、 播 放 媒 体 文件 、 连 接 电脑 里 的 文件 系统 等 。 但 因为 它 
们 能 要 求 用 户 进行 手动 安装 和 升级 ,而 且 并 不 是 在 每 一 种 平台 和 浏览 器 上 都 能 得 到 文 持 ， 所 以 那 
些 没 有 安装 最 新 版 本 的 用 户 经 常会 被 烦人 的 “升级 你 的 系统 ”消息 所 阻挡 。 

移动 设备 上 的 插件 支持 目前 还 很 零散 ， 因 为 移动 运营 商 、 手 机 制造 商 和 插件 开发 者 需要 在 性 
能 和 移动 设备 较 差 的 处 理 器 之 间 寻 求 平 衡 。 举 个 例子 ， 苹 果 公 司 坚 定 地 拒绝 在 让 hone 的 浏览 器 
里 支持 Adobe Flash， 这 就 意味 着 数 以 千 万 计 的 记 hone 用 户 目 前 无 法 访问 任何 形式 的 Flash 内 容 。 

除了 考虑 移动 访问 能 力 ， 任 何以 插件 形式 传输 的 内 容 都 储存 在 插件 自身 私有 的 代码 结构 内 ， 
所 以 无 论 插件 作者 如 何 努 力 提升 可 访问 性 ， 内 容 始终 无 法 像 用 简单 语义 化 HTML 编码 那样 易于 
被 屏幕 阅读 器 或 搜索 引擎 访问 到 。 

最 后 ， 还 有 一 个 虽 小 却 令 人 担忧 的 趋势 : Adobe Flash 和 PDF 正在 被 当做 最 流行 的 恶意 攻击 
媒介 , 因为 它们 在 绝 大 多 数 浏览 器 和 平台 上 都 得 到 了 广泛 支持 。 这 种 安全 风险 的 浮现 可 能 会 同时 
影响 用 户 使 用 率 和 企业 安全 标准 ， 继 而 影响 用 户 访问 基于 插件 内 容 的 意愿 。( 来 源 : “Adobe 
Flash’s security woes: How to protect yourself” , Computerworld, 12/14/09, http://t.cn/zRIQGFD, 以 
及 “Adobeto patch zero-day Reader, Acrobat hole”, CNET news, 12/16/09, http://news.cnet.conm/8301- 
1009 3-10416816-83.html。) 


新 设备 带 来 了 出 人 意料 的 交互 标准 


许多 流行 的 手机 有 着 卓越 的 浏览 器 ,在 CSS 和 JavaScript 功能 上 可 以 与 最 新 的 桌面 版 浏览 器 
媲美 ， 但 它们 带 来 了 与 标准 桌面 电脑 差别 巨大 的 用 户 页 面 交 互 方式 ， 这 可 能 会 明显 影响 可 用 性 。 
举 个 例子 ,支持 多 点 触 控 手 势 的 触摸 屏 出 现在 许多 移动 设备 上 , 成 为 新 的 交互 标准 。 轻 触 和 
拖 中 两 种 手势 结合 起 来 形成 了 一 套 新 的 交互 标准 ， 让 用 户 可 以 缩放 、 点 击 和 深 动 页 面 。 但 是 , 有 
一 些 重要 的 交互 方式 是 iPhone 或 Android 手机 用 户 在 多 点 触摸 环境 下 无 法 轻易 复制 的 。 
> 在 多 点 触摸 设备 上 ， 拖 忠 一 根 手 指 扫 过 屏幕 的 手势 用 于 平移 或 深 动 网 页 中 的 可 视 区 域 。 
既然 拖 点 手势 已 经 用 于 平移 屏幕 ， 就 没有 任何 手势 能 让 用 户 在 屏幕 上 拖 放 物 体 了 。 如 果 
你 设计 了 某 种 交互 体验 ， 让 用 户 只 能 用 拖 动 的 方式 将 项 目 添加 到 购物 车 中 ,这 个 功能 就 
无 法 在 这 些 高 级 移动 设备 上 实现 。 
> 一 些 网 络 应 用 程序 模拟 桌面 电脑 上 按 住 键盘 上 的 Control 或 Shift 键 同时 用 鼠标 点 击 项 目 进 
行 多 选 。 在 触摸 屏 上 ， 任 何 需要 同时 点 击 键盘 和 鼠标 的 交互 方式 都 不 受 支 持 ， 除 非 做 一 
点 针对 性 的 变通 。 
上 如 果 网 站 通过 设置 CSS 溢出 或 用 分 帧 将 页 面 分 成 多 个 小 尺寸 深 动 面板 ， 比 如 某 个 电子 邮 
件 阅读 器 像 Outlook 那 样 有 一 个 列表 视图 和 一 个 阅读 面板 ， 这 样 的 网 站 在 让 Phone 上 无 法 使 
用 , 因为 网 页 浏览 咒 里 没有 固定 显示 的 滚动 条 。 事实 上 , iPhone 可 以 完美 泻 染 出 整个 界面 ， 
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但 是 邮件 列表 或 详细 内 容 面 板 里 的 滚动 条 却 不 会 显示 ， 用 户 必 须 赁 直觉 猜测 他 们 看 到 的 
只 是 部 分 列表 或 邮件 内 容 ， 知 道 要 用 两 根 手指 的 拖 动手 势 在 子 面板 里 进行 滚动 。 
许多 网 站 开发 者 假定 每 个 能 够 泻 染 出 增强 体验 的 用 户 代 理 , 都 有 完整 支持 这 种 体验 所 需 的 所 
有 功能 和 工具 , 还 有 一 个 桌面 浏览 器 以 及 用 于 输入 的 键盘 和 鼠标 。 但 我 们 希望 你 已 经 知道 ,做 这 
些 假定 的 风险 越 来 越 大 。 
当 企 业 和 个 人 推出 新 网 站 , 或 在 现 有 系统 中 加 入 新 功能 时 , 他 们 面 对 着 如 何 设计 和 实现 前 端 
代码 的 重要 决策 。 因 为 互联 网 是 一 种 与 生 俱 来 无 法 预测 的 环境 , 所 以 对 浏览 器 和 插件 做 出 假定 只 
会 营造 出 一 种 虚假 的 安全 感 。 现实 是 , 在 网 页 中 使 用 的 任意 技术 如 果 不 是 简单 的 HIML 标记 , 就 
会 在 某 些 场合 出 现 问 题 ， 并 可 能 破坏 用 户 体验 。 
要 避免 这 些 陷阱 ， 任 何 对 网 站 的 核心 目标 或 业务 至 关 重 要 的 内 容 或 事务 ， 都 应 该 可 以 在 理 
解 基本 HTML 的 浏览 器 上 正常 工作 ， 这 是 互联 网 底层 设计 的 基石 ， 也 是 普遍 可 访问 性 的 关键 目 
标 。CSS 、JavaScript 、cookies 和 图 像 都 可 以 增强 某 些 浏览 需 体 验 ， 也 能 抑制 或 破坏 另外 一 些 体 
验 。 如 果 一 种 设计 方法 能 让 它们 变 得 次 要 和 可 选 ， 那 么 这 种 方法 就 能 将 最 佳 体验 带 给 最 广大 的 
用 户 群 体 。 


渐进 增强 是 个 好 方法 


面 对 日 常 项 目 中 种 类 繁杂 却 都 需要 我 们 提供 支持 的 用 户 和 设备 时 , 我 们 开始 思考 该 如 何 设计 
任何 人 都 能 用 的 网 站 和 应 用 程序 , 它 既 能 为 有 条 件 的 用 户 展 现 最 高 级 的 界面 元 素 ,， 又 能 在 开发 和 
测试 真实 客户 项 目 时 仍然 具备 可 控 性 。 我 们 需要 一 种 实际 的 方法 来 为 所 有 设备 提供 稳定 可 用 的 基 
准 体验 ， 将 需要 JavaScript、CSS 和 插件 紧密 配合 的 富 功 能 设计 留 给 现代 的 桌面 和 移动 用 户 。 

我 们 真正 想 要 的 是 一 颗 “ 魔 术 子 弹 ”: 用 最 简洁 、 最 有 效率 、 向 前 兼容 的 开发 方式 创建 一 个 
单一 、 可 控 、 能 到 处 运行 的 代码 库 。 

我 们 相信 已 经 找到 了 一 种 近乎 完美 的 解决 方案 : 渐进 增强 。 这 个 概念 最 初 由 Steven Champeon 
和 Nick Finck 在 2003 年 3 月 的 South by Southwest 大 会 上 提出 〈 见 “Inclusive Web Design for the 
Future”, Steven Champeon 和 Nick Finck 于 2003 年 3 月 11 日 在 SXSW 上 的 发 言 ,http://hesketh.com/ 
publications/inclusive_web_design_for the_future )。 渐进 增强 不 仅 是 一 种 方法 论 ， 也 是 一 种 思维 方 
式 。 它 首要 关注 内 容 和 功能 。 它 的 目标 是 只 用 HTML 语义 的 表达 潜力 来 制作 具有 完美 功能 性 和 
可 用 性 的 网 页 , 创建 从 一 开始 就 可 以 访问 的 页 面 ， 在 任何 能 上 网 的 设备 ( 手机、 游戏 系统 、 网 络 
冰箱 和 任何 你 能 想到 的 东西 ) 上 都 保证 能 
在 HTML 标记 的 描述 性 尽 可 能 增强 并 且 尽 可 能 清晰 之 后 ， 我 们 才 会 开发 CSS 和 JavaScript， 
两 者 都 写 在 外 部 文件 里 ， 然 后 以 不 喧 宾 夺 主 的 方式 应 用 到 HTML 标记 中 ， 将 其 转变 成 一 种 丰富 
多 彩 的 交互 体验 。 只 要 有 可 能 ,我 们 会 避免 内 联 样式 ( inline style ) 和 事件 处 理 函 数 。 渐 进 增强 
的 关键 从 仔细 区 分 内 容 (HTML )、 外 观 与 样式 (CSS ) 和 行为 ( JavaScript ) 开始 ， 这 让 我 们 能 
够 为 每 一 种 浏览 器 提供 可 行 和 合适 的 体验 。 
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渐进 增强 和 优雅 降级 是 不 是 一 回 事 

人 们 经 常会 把 渐进 增强 和 名 为 优雅 降级 ( graceful degradation ) 的 编程 手法 相提并论 ， 有 
时 还 会 混淆 。 虽 然 两 者 的 目标 是 一 致 的 ( 确保 用 户 得 到 可 用 的 体验 )， 但 它们 的 方法 却 有 着 根 
本 区 别 。 

优雅 降级 也 被 称 为 “容错 ”"， 基 本 原则 是 认定 复杂 系统 中 的 菜 些 部 分 会 出 错 ， 然 后 力求 内 
置 一 些 替 代 途 径 来 “降级 ”到 一 种 较 差 但 仍然 可 用 的 体验 。 优 雅 降级 和 容错 的 那些 原则 早 在 网 
页 设计 出 现 之 前 就 存在 了 。 事实 上 , 优雅 降级 背后 的 理念 经 常会 引用 一 些 网 络 作为 例子 ， 比 如 
如 何在 出 故障 的 电网 或 其 他 类 似 的 复杂 基础 设施 上 调整 负载 平衡 ,一 个 常见 的 互联 网 优雅 降级 
的 例子 是 noscript 标 签 ， 这 个 HTML 元 素 是 一 种 将 内 容 限 定 传 输 给 不 支持 JavaScript 用 户 的 方 
法 ， 是 正常 体验 不 可 用 时 的 备用 方案 。 

渐进 增强 的 核心 开发 原则 采取 了 一 种 完全 不 同 的 方法 。 它 假定 所 有 基于 互联 网 的 系统 都 
能 被 缩减 成 一 种 简单 可 用 的 体验 ,用 单一 的 代码 库 就 能 实现 ,而 且 在 任何 地 方 都 能 “正常 工作 ”。 
也 就 是 说 ， 它 能 将 一 种 可 用 、 可 读 、 功 能 完整 和 令 人 满意 的 体验 提供 给 最 广泛 的 设备 、 浏 览 器 
和 平台 。 在 以 最 简单 的 方式 满足 众人 的 需求 之 后 ， 再 渐进 地 (于 是 就 有 了 名 字 里 的 “渐进 ”二 
字 ) 登 如 上 现代 浏览 器 能 处 理 的 健壮 增强 设计 ， 以 打造 出 完整 、 复 杂 的 体验 。 

















很 多 年 来 , 我 们 一 直 使 用 渐进 增强 作为 开发 流程 的 基石 , 并 且 意 识 到 它 是 一 种 当前 实际 可 行 
而 且 向 前 兼容 的 网 站 开发 方法 。 
> 它 可 以 实现 “普遍 的 可 访问 性 ”， 不 仅 能 向 屏幕 阅读 器 和 其 他 辅助 技术 提供 广泛 的 可 访问 
性 ， 还 能 照顾 到 禁用 了 JavaScript 或 CSS 的 用 户 ， 以 及 过 时 或 功能 有 限 的 浏览 器 。 
> 它 促 进 了 代码 清晰 化 : 从 底层 开始 思考 能 使 代码 更 干净 、 更 模块 化 ， 每 一 个 功能 组 件 都 
有 唯一 的 目的 ， 可 以 在 多 个 上 下 文 界面 中 重用 。 
> 它 让 事物 保持 集中 和 简单 ， 能 让 企业 团体 只 需 维 护 单个 统一 的 代码 库 ， 从 而 兼容 所 有 的 
桌面 、 移 动 和 视频 游戏 设备 。 
> 它 使 网 站 具备 向 前 兼容 的 能 力 : 今天 能 正常 工作 的 最 简单 版 本 明天 继续 可 用 ， 根 据 处 理 
能 力 不 同 所 纳入 的 功能 可 以 很 容易 地 进行 修改 ,无需 进行 大 修 或 移 除 复杂 的 补丁 。 
> 它 可 以 实现 更 简单 的 后 端 接口 。 我 们 总 是 使 用 内 建 的 、 完 全 可 用 的 网 页 元 素 作为 与 服务 
器 之 间 的 单一 数据 连接 ， 然 后 用 脚本 来 创建 代理 连接 ， 使 增强 的 自 定 义 网 页 元 素 与 基本 
网 页 元 素 之 间 保 持 同步 。 
> 它 使 得 多 种 体验 可 以 共享 一 个 单一 的 公用 代码 库 。 我 们 开发 的 每 个 网 站 都 能 将 同一 张 
HTML 页 面 同时 用 于 基本 体验 和 增强 体验 , 因为 两 者 唯一 的 区 别 在 于 CSS 和 JavaScript 如 何 
全 加 到 这 个 基础 标记 之 上 。 
过 去 的 几 年 间 , 渐进 增强 的 方法 已 经 悄悄 被 互联 网 上 一 些 最 大 最 好 的 网 站 所 采用 , 原因 就 在 
于 它 能 让 这 些 网 站 覆盖 最 广泛 的 潜在 用 户 。 如 果 你 在 禁用 JavaScript 或 CSS 的 情况 下 浏览 Google、 
Facebook 、 亚 马 逊 或 Digg, 你 会 吃惊 地 发 现 这 些 网 站 运行 状况 良好 。 每 个 网 站 实施 渐进 增强 的 方 
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式 可 能 会 稍 有 不 同 ， 但 每 个 网 站 都 实现 了 向 任何 一 位 访问 者 提供 可 用 体验 的 目标 。 

大 多 数 情况 下 , 实施 渐进 增强 并 兑现 普遍 可 访问 的 承诺 并 不 需要 多 做 工作 , 基本 上 就 是 做 到 
以 下 几 点 : 忘记 过 去 的 一 些 坏 习 惯 ， 换 一 个 角度 看 待 设计 和 开发 ， 以 及 确保 许多 需要 做 好 的 细 枝 
末节 真正 地 做 好 。 

本 书 的 目的 是 通过 运用 在 现实 世界 中 测试 过 的 、 简 单 可 行 的 渐进 增强 技巧 来 帮助 所 有 人 开发 
普遍 可 访问 的 网 站 。 

第 一 部 分 会 回顾 我 们 实施 渐进 增强 的 方法 , 包括 以 一 种 不 同 的 方式 思考 如 何 规划 设计 , 以 及 
用 我 们 独特 的 方法 在 应 用 增强 之 前 测试 每 种 浏览 右 的 能 力 。 然后 , 回顾 HTML、CSS 和 JavaScript 
的 最 佳 实践 ， 它 们 会 赋予 你 所 有 必要 的 工具 ， 支 持 你 以 一 种 更 新 更 好 的 方式 建造 网 站 。 

在 此 之 后 , 我 们 会 分 析 一 些 特定 的 界面 组 件 或 部 件 , 一 步 步 地 向 你 展示 使 用 渐进 增强 方法 时 
会 用 到 的 特定 标记 、 样式 、 脚 本 和 增强 辅助 功能 。 这 些 例子 中 的 每 一 个 都 提供 了 特定 的 操作 指南 ， 
合 在 一 起 则 展示 了 一 套 完整 的 原则 和 方法 , 可 以 扩展 到 其 他 编程 环境 , 将 渐进 增强 的 方法 广泛 应 
用 于 所 有 情况 。 

我 们 已 经 在 自己 的 网 站 和 一 些 客户 合约 中 使 用 了 这 些 技巧 , 发 现 它 有 助 于 使 渐进 增强 更 加 切 
实 可 行 。 和 希望 你 读 完 这 本 书 时 也 同意 这 个 观点 。 
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我 们 的 方法 








在 高 级 CSS、 客 户 端 JavaScript 和 Ajax， 以 及 Flash 等 浏览 器 插件 的 支持 下 , 最 新 的 网 页 技术 创 
新 赋予 了 现代 网 站 视觉 吸引 力 和 丰富 的 交互 能 力 。 不 过 它们 有 很 大 的 局 限 性 : 浏览 器 和 设备 对 这 
些 技术 的 支持 程度 参差 不 齐 。 虽 然 现 代 浏 览 咒 和 最 新 的 移动 设备 有 能 力 泻 染 出 非常 复杂 的 界面 ， 
但 它们 所 占 的 比例 还 不 够 大 。 正如 引言 中 谈 到 的 那样 ,制作 一 个 只 适用 于 少数 高 端 浏览 器 和 设备 
的 网 站 或 应 用 程序 很 难 服务 于 最 广大 的 用 户 。 
我 们 想 要 确保 客户 的 内 容 、 消 息 和 功能 可 以 到 达 每 一 个 人 , 不 仅 是 那些 使 用 现代 浏览 器 ( 支 
持 最 新 网 页 技术 ) 的 人 ， 而 是 任何 有 可 上 网 设备 的 用 户 。 因 此 , 我 们 在 几 年 前 开始 将 渐进 增强 的 
理念 引入 客户 的 项 目 中 。 
渐进 增强 的 原理 很 简单 : 输出 符合 标准 的 纯 HTML 页 面 , 使 所 有 设备 都 更 有 可 能 演 染 出 可 用 
的 内 容 。 然 后 ， 只 为 那些 能 理解 CSS 和 JavaScript 的 浏览 器 在 页 面 上 无 缝 琶 加 增强 的 样式 和 脚本 。 
不 过 , 开始 用 这 种 方法 构建 网 站 并 测试 结果 时 , 我 们 有 了 一 个 重大 发 现 : 这 种 方法 没有 考虑 
到 许多 旧版 浏览 器 和 较 新 的 移动 浏览 器 仅 部 分 支持 JavaScript 和 CSS。 此 外 , 用 户 还 可 能 会 基于 速 
度 、 安 全 或 可 用 性 等 原因 有 意 禁 用 这 些 技术 。 在 现实 世界 里 ，CSS 和 JavaScript 必 须 协同 工作 才能 
实现 复杂 的 应 用 程序 界面 和 组 件 。( 在 启用 JavaScript 但 不 能 正常 支持 CSS 定 位 的 浏览 器 中 ， 日 历 
组 件 或 滑 块 肯定 不 能 用 。) 
在 对 基于 渐进 增强 的 网 站 进行 测试 时 , 我 们 发 现 不 少 浏览 器 会 把 一 个 本 来 可 用 的 HTML 页 面 
“增强 ”为 一 团 “ 乱 麻 ”。 原因 就 是 这 些 浏览 器 并 不 完全 支持 它们 运行 的 脚本 和 应 用 的 样式 。 然而 ， 
我 们 如 何 知道 哪些 浏览 器 有 能 力 正确 演 染 出 这 些 增强 信息 呢 ? 
我 们 意识 到 ， 要 实现 渐进 增强 方法 ， 证 每 个 人 都 有 可 用 体验 的 目标 ， 需 要 做 三 件 事 。 
> 仔细 检查 设计 ， 确 保 每 一 部 分 ( 即使 是 最 新 潮 的 Web 2.0 或 Ajax 组 件 ) 都 是 基于 结构 清晰 
的 语义 化 HTML, 在 任何 完全 不 支持 CSS 或 JavaScript 的 浏览 器 上 , 都 能 提供 功能 完整 的 基 
本 体验 。 

> 在 添加 增强 信息 之 前 ， 先 测试 某 种 浏览 器 的 CSS 和 JavaScript 支 持 程度 ， 以 更 好 判断 是 为 
它 提供 基本 体验 ， 还 是 应 该 进行 增强 。 

> 对 那些 已 升级 到 增强 体验 的 浏览 器 ， 要 确保 花 大 力气 维护 可 访问 性 ， 比 如 提供 键盘 导航 

支持 和 添加 支持 屏幕 阅读 器 的 功能 。 

本 章 将 讨论 为 确定 哪些 浏览 器 应 该 获得 增强 体验 而 开发 的 浏览 器 能 力 测试 模型 ,以 及 它 可 以 
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测试 哪些 功能 。 然 后 将 介绍 我 们 在 日 常客 户 项 目 中 使 用 的 渐进 增强 方法 ,这 个 方法 的 第 一 步 叫 做 
“X 光 透视 ”"。 这 一 步 会 分 析 某 种 复杂 的 界面 设计 ， 拟 出 能 支持 基本 功能 体验 的 语义 化 HTML， 然 
后 制订 计划 ,为 有 能 力 的 浏览 器 开发 高 级 CSS 和 JavaScript， 以 创造 增强 体验 ， 同 时 保持 对 屏幕 阅 
读 需 的 完整 可 访问 性 。 


1.1 测试 浏览 器 能 力 


我 们 对 渐进 增强 的 初始 研究 揭示 出 大 多 数 开发 者 选择 的 页 面 增强 方式 是 以 下 两 者 之 一 : 问 所 
有 启用 JavaScript 的 浏览 器 传递 增强 信息 , 或 通过 浏览 器 嗅 探 ( 检测 Internet Explorer 等 特定 用 户 代 
理 或 WebKit 这 样 的 泻 染 引擎 ) 仅 对 特定 的 一 组 浏览 器 输出 增强 信息 

我 们 从 一 开始 就 排除 了 浏览 器 嗅 探 ， 原 因 有 下 面 几 点 。 

P 有 效 的 嗅 探 需要 精确 了 解 每 种 浏览 器 的 行为 ( 以 及 其 各 个 版 本 的 变化 情况 )， 这 使 维护 脚 

本 成 为 一 项 巨大 、 复 杂 和 永 无 止境 的 挑战 。 

> 根据 定义 ， 它 不 是 向 后 兼容 的 。 你 只 能 嗅 探 当前 存在 的 浏览 器 ， 如 果 某 种 能 提供 增强 体 

验 的 新 款 浏览 器 明天 发 布 ， 它 就 会 被 拒 之 门 外 ， 除 非 把 它们 加 入 列表 。 
> 即使 是 最 详尽 的 用 户 代 理 白 名 单 也 可 能 会 失效 ， 因 为 浏览 器 可 以 被 配置 成 报告 错误 的 用 
户 代理 信息 ， 从 而 绕 过 这 些 技术 ( 也 被 称 作 浏览 器 欺骗 )。 

所 以 第 一 种 方式 (向 所 有 启用 JavaScript 的 浏览 器 传递 增强 信息 ) 看 上 去 是 更 好 的 选择 ， 
为 大 多 数 支 持 JavaScript 的 浏览 器 都 能 够 泻 染 出 增强 的 体验 。 但 是 前 面 提 到 , 某 些 浏览 器 只 是 部 分 
支持 这 些 增强 信息 ， 从 而 导致 布局 混乱 和 JavaScript 错 误 ， 这 种 情况 的 数量 多 得 惊人 。 

观察 这 些 情况 时 ， 我 们 注意 到 这 些 缺 损 的 体验 植 根 于 两 大 模式 : 一 些 浏 览 絮 错误 地 演 染 了 
CSS， 原 因 是 它们 不 能 很 好 地 支持 盒 模型 (box model )、 定 位 、 浮 动 或 其 他 源 于 网 页 标准 的 常见 
CSS 属 性 ; 另 一 些 则 不 能 很 好 地 运行 常见 JavaScript 功 能 ， 例 如 DOM 操 作 、 事 件 处 理 、 调 整 窗口 
大 小 和 执行 Ajax 请 求 。 

如 果 我 们 有 一 种 可 靠 的 方法 能 检验 若干 有 恰当 代表 性 的 浏览 器 能 力 , 然后 仅 在 我 们 对 CSS 和 
JavaScript 能 正确 协同 工作 有 十 足 把 握 时 才 输 出 增强 信息 ,那么 应 用 我 们 的 渐进 增强 方法 就 会 容易 
和 可 靠 得 多 。 

带 着 这 个 目标 ,我们 通过 不 断 试 错开 发 出 了 浏览 器 能 力 测试 框架 。 其 中 的 JavaScript 基 本 检 
验 项 目 相当 简单 : 我 们 的 测试 使 用 了 一 种 叫做 对 象 探测 (object detection ) 的 方法 ,通过 它 实际 
上 能 询问 浏览 吉 是 否 识别 如 document .getElementById 函 数 这 样 的 本 地 对 象 , 并 得 到 明确 的 true 或 
false 回 应 。 每 项 测试 都 以 一 种 容错 和 非 干 扰 性 的 方式 编写 ， 因 此 如 果 某 种 浏览 器 不 理解 一 个 
JavaScript 方 法 ， 它 不 会 报错 。 

更 具 挑战 性 的 问题 是 如 何 判 断 某 种 浏览 器 是 否 能 正确 支持 高 级 CSS 技 术 。 没 有 任何 原生 方法 
能 使 用 对 象 探测 来 询问 某 种 浏览 器 是 否 能 恰当 演 染 具体 的 CSS 特 性 ,例如 浮动 、 定 位 、 垂 直 分 层 
元 素 或 透明 度 。 

因此 ， 我 们 设计 了 一 套 CSS 能 力 测试 用 例 专 门 做 这 件 事 。 每 一 项 CSS 测 试 都 使 用 JavaScript， 
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将 不 可 见 的 HTML 元 素 插 入 到 网 页 中 ， 应 用 一 组 特定 的 高 级 CSS 规 则 ， 然 后 运行 一 个 JavaScript 函 
数 来 测量 结果 。 举 个 例子 ， 要 了 解 浏览 器 是 否 正确 支持 定位 ， 测 试 会 使 用 CSS 将 一 个 div 放 置 在 
某 个 特定 位 置 ， 然 后 运行 一 个 JavaScript 函 数 来 比较 测 出 的 坐标 是 否 与 参照 条 件 匹 配 。 

一 种 浏览 需 通 过 全 套 能 力 测试 后 ,我们 就 可 以 很 有 把 握 地 认定 它 对 CSS 和 JavaScript 两 者 的 处 
理 都 是 一 致 并 且 符 合 标准 的 , 应 该 能 够 良好 地 泻 染 出 增强 体验 。 到 这 一 步 ,测试 会 动态 加 载 高 级 
样式 表 和 脚本 ,将 基本 的 HTML 标记 转变 成 增强 体验 ,并 在 页 面 中 添加 一 个 链接 以 供 那些 偏爱 简 
单 版 本 的 用 户 关闭 增强 体验 。 最 后 ， 测 试 会 设置 一 个 cookie 防 止 之 后 再 次 运行 能 力 测 试 ， 从 而 提 
升 页 面 速度 。 
将 测试 框架 实际 投入 使 用 时 , 我 们 见 到 了 它 为 渐进 增强 项 目 带 来 的 实际 益处 。 首 先 , 它 给 了 
我 们 一 种 非常 可 靠 的 方式 来 划分 哪些 浏览 器 可 以 正确 显示 增强 体验 , 哪些 不 能 ,因此 可 以 大 幅 降 
低 本 来 可 用 的 基本 页 面 被 增强 信息 损坏 的 危险 。 又 因为 这 个 测试 只 会 在 那些 通过 的 浏览 器 上 加 载 
增强 版 CSS 和 JavaScript 文 件 ， 所 以 它 让 我 们 能 提供 小 得 多 的 、 更 加 流 线 化 的 基本 体验 (不 会 预先 
载 和 大量 标记 、 样 式 或 脚本 )， 结 果 是 下 载 时 间 大 大 加 快 ， 不 必要 的 服务 器 请 求 也 变 少 了 。 

这 个 测试 框架 的 设计 是 高 度 灵 活 和 模块 化 的 , 可 以 自 定义 修改 , 以 测试 具体 客户 项 目 要 求 的 
特定 CSS 和 JavaScript 能 力 。 如 果 不 存 在 复杂 的 CSS 浮 动 或 Ajax 肢 本， 我 们 就 可 以 从 测试 标准 里 移 
除 相 应 的 代码 。 

在 我 们 的 项 目 中 ,通常 会 运行 一 套 能 力 测 试 ， 简 单 地 将 浏览 器 划分 成 “基本 ”或 “增强 ”两 
个 组 , 以 方便 编程 和 维护 。 我 们 将 这 种 对 基本 和 增强 的 区 分 视 作 以 最 小 的 力气 为 最 广泛 的 设备 提 
供 访 问 的 方式 。 从 这 种 基准 支持 程度 开始 ,你 就 可 以 相当 容易 地 进一步 定制 测试 脚本 ,将 浏览 带 
更 加 精细 地 划分 成 多 个 能 力 等 级 或 为 特定 设备 〈 比如 iPhone 或 Kindle ) 提供 优化 过 的 体验 。 

第 6 童 将 详细 分 析 这 个 能 力 测试 的 结构 和 运行 机 制 ， 并 讨论 一 些 能 体现 模块 化 方式 优点 的 
情况 。 


1.2 规划 渐进 增强 : X 光 透 视 


随 着 用 一 轮 轮 的 迭代 对 能 力 测试 进行 打磨 , 我 们 开始 发 展 出 一 套 方法 , 将 复杂 的 网 页 界面 设 
计 进 行 分 解 ， 使 之 适合 开发 渐进 增强 和 能 力 测试 。 

有 时 , 找 出 能 正确 支持 某 种 高 级 设计 组 件 的 原生 HTML 元 素 非常 容易 : 一 个 自 定义 样式 下 拉 
菜单 的 外 观 和 行为 非常 像 原 生 的 select 元 素 ， 不 用 多 想 就 知道 该 从 它 起 步 。 类 似 地 ， 自 定义 样式 
的 复 选 框 可 能 会 存在 一 些 打 造 样 式 方面 的 难题 ， 但 是 我 们 从 一 开始 就 知道 它们 是 复 选 框 。 

然而 ， 其 他 一 些 案例 却 没有 这 人 么 明显 : 一 个 Netflix 样 式 的 、Ajax 驱 动 的 星 级 评定 组 件 应 该 使 
用 哪 种 基本 标记 ? 我 们 在 众多 新 闻 网 站 都 能 看 到 的 “最 热门 /最 多 邮件 发 送 /最 多 评论 ”标签 式 内 
容 组 件 又 该 如 何 处 理 ?” 那些 能 在 Kayak 和 其 他 电子 商务 网 站 上 看 到 的 ， 用 于 过 滤 结 果 的 自 定义 日 
期 或 价格 范围 滑 块 呢 ? 那些 更 加 复杂 但 却 日 益 流 行 ， 类 似 于 Gmail 这 样 使 用 拖 放 等 富 交互 手段 的 
Ajax 驱动 型 应 用 程序 呢 ? 你 无 法 从 通常 受 支 持 的 HTML 元 素 工具 箱 里 找到 符合 这 些 情 形 的 精确 
匹配 。 
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话 又 说 回来 ,虽然 这 些 例 子 都 是 高 度 定制 的 并 且 交 互 性 丰富 , 但 它们 支持 的 用 户 操作 ( 在 刻 
度 栏 上 选择 一 个 选项 ， 从 一 个 内 容 区 域 切换 到 另 一 个 ,设置 某 个 范围 的 低 点 和 高 点 排序， 搜索 
和 检索 ) 却 明 显 能 用 标准 HIML 做 到 。 我 们 只 需 一 些 创造 性 思考 ,解构 这 些 组 件 和 交互 方式 ， 然 
后 确定 用 哪些 原生 HTML 元素 能 完成 同样 的 工作 。 

主要 挑战 在 于 ,如何 透 过 自 定义 样式 、 动 画 和 其 他 行为 看 到 隐 含 的 基本 运动 部 件 。 我 们 把 这 
一 过 程 比 喻 成 “将 组 件 放 到 X 光 下 ”: 举 个 例子 , 那些 整洁 的 CSS 和 脚本 功能 使 自 定义 滑 块 具备 交 
互 功 能 , 但 它们 其 实 只 是 皮肤 和 衣服 ,在 基本 体验 中 ，, 滑 块 的 “骨髓 ” 则 是 用 来 设置 高 低 数 值 的 
文本 框 输入 ， 或 选择 一 小 组 选项 的 单 选 按钮 ， 甚 至 还 可 以 是 用 来 选择 一 大 组 选项 的 选择 菜单 。 

X 光 透视 在 审视 复杂 的 设计 时 会 变 得 更 加 复杂 和 有 趣 ， 比 如 组 合 多 种 内 容 类 型 和 交互 组 件 的 
网 站 , 使 用 动态 内 容 和 复杂 布局 的 网 络 应 用 程序 , 或 者 根据 用 户 交 互 情 况 在 页 面 中 选择 性 提供 内 
容 的 工作 流程 等 。 

在 宏观 层面 上 也 有 一 次 X 光 透视 过 程 ， 以 识别 网 页 各 主要 部 分 (或 多 个 网 站 页 面 之 间 的 共有 
模式 ) 如 何 组 合 在 一 起 ， 寻 找 可 能 揭示 出 内 容 和 功能 关键 部 分 组 合 关系 的 行为 模式 ， 并 评估 如 何 
优化 这 些 资源 的 序列 ， 以 确保 它们 在 基本 和 增强 环境 下 都 能 正常 工作 。 

进行 这 种 高 阶 分 析 时 , 组 件 或 元 素 层级 的 基本 原则 同样 适用 , 即 确定 服务 用 户 所 需 的 所 有 关 
键 内 容 和 功能 ， 考 虑 在 某 种 特定 情形 下 可 以 使 用 的 HTML 元 素 〈 基 于 内 容 格式 、 数 据 需求 、 业 务 
规则 或 整体 流程 )， 确 定 能 够 提供 最 佳 用 户 体验 的 标准 HTML 标 记 ， 很 简单 。 

第 2 章 会 更 详细 地 讨论 X 光 透视 ， 并 考虑 一 些 能 探究 解构 过 程 细节 的 复杂 设计 方案 。 此 外 ， 
第 8 章 ~ 第 19 章 会 把 界面 组 件 一 个 个 地 放 在 X 兴 下 ,看 看 渐进 增强 技术 如 何 让 基本 和 增强 体验 都 尽 
可 能 具有 完整 可 访问 性 、 功 能 性 和 可 用 性 。 

在 深入 探讨 如 何 将 X 光 透视 实际 应 用 于 网 站 和 组 件 之 前 , 我 们 先 介绍 一 下 在 项 目 中 成 功 进行 
渐进 增强 开发 的 流程 。 


1.3 从 X 光 到 实践 : 渐进 增强 开发 的 构成 


随 着 我 们 不 断 打 磨 能 力 测试 框架 并 应 用 X 光 透视 ,一 套 术 语 和 方法 开始 浮现 , 定义 了 我 们 的 
渐进 增强 开发 过 程 。 我 们 需要 支持 两 种 体验 :“ 基 本 ”体验 对 所 有 能 上 网 的 设备 ( 在 我 们 力 所 能 
及 的 范围 内 ) 全 部 有 效 ， 另 一 种 “增强 ”体验 则 用 于 功能 更 强 的 浏览 器 。 前 者 的 标记 是 构建 其 他 
一 切 事物 的 基础 ， 所 以 我 们 就 将 它 命 名 为 “基础 标记 ”( foundation markup )。 又 因为 功能 更 加 丰 
富 的 体验 依赖 于 高 级 的 表现 方式 和 行为 ,所 以 我 们 称呼 任何 实现 它们 的 标记 、 样 式 表 或 脚本 为 “高 
级 ”( advanced ) 或 “增强 ”( enhanced ) 资源 。 

为 了 成 功 实现 这 些 体 验 ， 必 须 遵 守 渐 进 增强 方法 的 三 条 关键 原则 : 

> 以 清晰 的 内 容 和 恰当 的 标记 作为 起 点 ; 

> 坚持 布局 和 表现 严格 分 离 ; 

> 高 级 行为 和 样式 层 无 颖 又 加 ， 兼 顾 可 访问 性 。 

鉴于 我 们 为 基本 体验 设 定 的 目标 是 普遍 访问 ,所 以 开发 方法 必须 以 清晰 的 内 容 和 恰当 的 标记 




































































6 第 1 章 我 们 的 方法 























作为 起 点 。 排列 整齐 的 语义 标记 是 基础 , 它 既 有 意义 又 具备 功能 性 , 在 此 之 上 可 以 添加 增强 信息 ; 
它 也 更 有 可 能 在 更 广泛 的 设备 上 具备 可 用 性 ; 它 还 为 用 户 使 用 辅助 技术 导航 网 站 提供 了 一 张 清晰 
的 地 图 。 

围绕 网 页 内 容 选择 标记 的 方式 会 大 大 影响 CSS 和 JavaScript 等 增强 信息 的 加 入 方式 , 以 及 你 的 
网 页 内 容 对 那些 视 障 用 户 的 可 访问 性 。 一 个 由 干净 、 人 整齐、 结构 良好 且 准 确 的 标记 构建 而 成 的 网 
站 能 够 大 大 方便 制作 样式 和 交互 ， 还 可 以 重用 代码 。 

为 了 给 基本 和 增强 体验 打造 出 最 健壮 的 基础 标记 , 关键 在 于 理解 语义 化 HTML 的 特性 、 功 能 
和 限制 ， 以 及 当前 HTML 官方 规范 里 的 一 系列 元 素 、 标 签 和 属性 〈 乃至 后 续 规范 中 放置 向 前 兼 
代码 的 新 功能 )。 第 3 章 将 分 析 这 些 方面 ， 并 推荐 最 佳 方法 。 

我 们 在 渐进 增强 开发 里 严格 遵循 的 第 二 个 关键 原则 是 布局 和 表现 严格 分 离 ,首先 制作 出 网 页 
的 线 框图 ( wireframe )， 然 后 再 填充 内 容 ， 因 为 这 样 大 大 简化 了 项 目 级 模板 系统 的 创建 工作 ， 同 
时 将 所 有 受 CSS 影 响 的 表现 和 样式 与 内 容 严 格 分 离 。 

当 一 张 网 页 的 结构 和 样式 被 构建 成 独立 于 它 的 内 容 时 ,就 能 很 容易 地 创建 相同 布局 的 多 种 变 
体 , 为 各 种 各 样 的 浏览 器 和 设备 提供 最 佳 体验 , 而 不 用 使 用 会 影响 内 容 样式 的 结构 性 CSS。 然 后 ， 
就 有 了 考虑 更 多 媒体 类 型 ( 标准 桌面 屏幕 、 移 动 设 备 、 印 刷 品 和 辅助 设备 ) 的 灵活 性 ， 有 选择 地 
运用 基本 和 高 级 CSS 特 性 来 适应 它们 。 第 4 章 将 分 析 哪 些 类 型 的 样式 能 安全 地 应 用 于 大 多 数 环 境 ， 
那些 相对 更 复杂 的 CSS 规 则 是 如 何 工 作 和 互相 影响 的 , 以 及 如 何 为 最 简洁 的 基本 体验 和 最 健壮 的 
增强 体验 集中 并 优化 样式 。 

用 JavaScript 实 现 的 高 级 行为 和 表现 能 大 大 增强 用 户 体 验 , 但 是 如 果 用 得 不 合适 或 者 不 当心 ， 
就 会 导致 一 大 部 分 用 户 完全 无 法 使 用 某 个 组 件 、 网 页 甚至 整个 网 站 。 许多 优秀 的 指南 和 明确 的 最 
佳 实践 方法 都 介绍 了 如 何 组 织 和 引用 脚本 ,从 而 无 颖 过 加 增强 行为 ,让 它们 能 够 安全 地 提升 有 能 
力 的 浏览 器 的 体验 ， 同 时 也 能 确保 基本 体验 不 受 损 。 第 $ 章 会 详细 说 明 这 些 原 则 和 技巧 ， 以 及 相 
关 的 可 访问 性 考量 。 

在 更 好 地 理解 HTML 标 记 、 良 好 定义 的 CSS 以 及 非 干 扰 性 JavaScript 如 何 协同 工作 之 后 ， 第 6 
章 将 深入 介绍 能 力 测试 ， 看 看 如 何 使 用 上 述 原 则 和 方法 来 实现 一 种 更 为 可 靠 的 渐进 增强 体验 。 


1.4 理论 结合 实践 


接 下 来 几 章 会 重点 介绍 最 佳 实践 ， 帮 助 你 理解 如 何在 真实 的 项 目 中 成 功 实施 渐进 增强 理论 。 
下 一 章 开始 先 介 绍 如 何 使 用 X 光 方法 ,之 后 几 章 会 涉及 编写 有 意义 的 HTML 标 记 、 有 效应 用 CSS， 
以 及 使 用 JavaScript 来 制作 增强 和 添加 行为 。 最 后 ， 第 6 章 会 详细 讨论 浏览 如 能 力 测试 套件 。 
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第 2 章 


渐进 增强 实践 : X 光 透视 








我 们 构建 网 站 的 首要 目标 是 根据 每 个 人 所 用 浏览 器 的 能 力 和 局 限 , 尽 可 能 给 他 们 创造 最 佳 的 
体验 。 我 们 相信 通过 渐进 增强 的 方法 就 有 可 能 实现 这 个 目标 , 它 为 那些 使 用 现代 浏览 器 的 用 户 提 
供 了 高 级 代码 带 来 的 所 有 益处 ,同时 也 能 满足 使 用 旧式 浏览 器 、 屏 幕 阅读 器 和 可 上 网 手机 用 户 的 
需求 ， 而 这 一 切 都 基于 一 个 统一 的 代码 库 。 
通过 在 许多 客户 项 目 上 的 不 断 摸索 , 我 们 设计 出 了 一 套 基 于 渐进 增强 的 自 定义 方法 , 它 有 两 
个 重点 : 一 是 能 力 测 试 ， 用 来 明确 地 判断 每 种 浏览 器 具体 的 能 力 ; 二 是 我 们 称 之 为 “X 光 透视 ” 
的 设计 与 开发 规划 流程 。 

X 光 透视 基于 这 一 原则 : 即使 是 最 复杂 的 现代 网 页 设计 〈 比如 那些 有 着 类 似 桌 面 程序 行为 、 
基于 Ajax 的 动态 应 用 程序 ) 也 可 以 并 应 该 能 表述 成 简单 的 语义 化 HTML， 从 而 为 所 有 访问 者 提供 
一 种 可 用 且 可 访问 的 体验 。 使 用 X 光 透视 的 意思 是 ,“ 透 过 ”一 种 设计 中 复杂 的 组 件 和 视觉 样式 ， 
分 辨 出 组 成 网 页 的 核心 内 容 和 功能 要 素 ， 并 找到 等 价 于 两 者 的 简单 通用 HTML。 它 的 意思 还 包括 
了 明确 各 个 组 件 的 复杂 样式 和 行为 , 然后 制定 一 套 策略 , 视 情 况 将 这 些 增强 应 用 到 有 能 力 的 浏览 
器 上 ， 同 时 保持 可 访问 性 。 

XX 光 流程 是 一 种 强大 的 工具 ， 能 让 你 有 策略 地 思考 添加 增强 信息 的 最 佳 可 行 方 式 。 它 能 让 处 
处 死路 的 恼人 体验 变 成 完全 可 访问 的 顺畅 体验 。 你 要 做 的 仅仅 是 “忘掉 ” 某 些 常见 的 错误 编程 习 
惯 ， 培 养 新 的 策略 性 思考 方式 : 首先 ， 尽 可 能 建立 起 最 完整 的 网 页 基本 体验 ， 然 后， 再 把 那些 很 
酷 的 内 容 琶 加 上 去 。 

这 一 章 会 概述 我 们 使 用 的 X 光 方法 的 原理 ， 然 后 回顾 4 个 真实 的 设计 案例 ， 里 面包 括 了 一 系 
列 高 级 界面 元 素 和 交互 方式 。 这 些 案例 研究 会 展示 如 何 用 X 光 透视 评估 一 种 复杂 的 设计 ， 回 顾 我 
们 在 制作 基础 和 增强 标记 、CSS 和 JavaScript 脚 本 时 所 做 的 开发 和 编程 决策 , 还 讨论 了 为 确保 广泛 
可 访问 性 而 添加 的 一 些 额 外 增强 信息 。 最 后 ， 列 出 了 测试 代码 时 需要 考虑 的 标准 要 点 核对 表 ， 以 
此 检验 所 有 围绕 渐进 增强 付出 的 努力 是 否 的 确 能 给 所 有 用 户 都 带 来 满意 的 体验 。 


2.1 X 光 透视 概述 


X 光 透视 是 我 们 开发 的 一 套 方法 , 用 来 评估 复杂 的 网 站 设计 , 将 其 分 解 成 最 基本 的 组 成 部 分 ， 
然后 再 使 用 某 种 方式 组 装 起 来 , 使 包含 同样 代码 的 网 页 既 能 在 功能 齐全 的 现代 浏览 需 上 工作 , 也 
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能 在 所 有 其 他 浏览 器 和 设备 上 工作 ， 哪 怕 它 们 除了 理解 基本 的 HTML 外 什么 都 不 会 。 

X 光 的 流程 始 于 一 份 目标 设计 ， 里 面 展 示 了 最 终 页 面 在 现代 浏览 器 上 应 该 具备 的 外 观 和 行 
为 ,包括 所 有 的 高 级 装饰 元 素 。 带 着 这 份 目标 设计 ,我 们 进入 规划 和 开发 流程 ， 它 由 三 个 关键 部 
分 组 成 。 

(1) 定义 整体 的 内 容 层 级 和 优先 级 ， 找 出 各 个 组 件 对 应 的 基本 HTML 元 素 。 

(2) 制作 能 提供 所 有 关键 内 容 和 功能 的 “基础 ”标记 。 此 标记 尽 可 能 少 地 使 用 “安全 ”样式 ， 
不 使 用 JavaScript。 

(3) 编写 高 级 标记 、CSS 和 JavaScript， 为 有 能 力 提供 支持 的 浏览 器 添加 视觉 和 功能 增强 。 

用 代码 构建 基础 和 增强 体验 通常 是 一 个 不 断 重 复 的 过 程 。 当 我 们 编写 完 基础 标记 的 初稿 , 开 
始 研究 在 哪里 添加 增强 信息 时 , 通常 会 发 现在 某 些 情况 下 为 了 实现 这 些 增强 ,必须 对 基础 标记 做 
一 些 细微 调整 。 





















































2.1.1 定义 内 容 层 级 并 将 组 件 映 射 到 HTML 


第 一 步 的 工作 是 建立 优先 顺序 , 既 自 上 而 下 地 辨识 出 整体 的 内 容 分 组 和 层级 , 同时 又 自 下 而 
上 地 定义 出 与 各 个 内 容 和 功能 等 同 的 基本 HTML 。 
关于 内 容 分 组 和 层级 ， 你 需要 考虑 几 个 问题 。 
p> 页 面 哪些 内 容 最 重要 ? 要 理解 网 页 传递 的 目的 或 者 消息 ， 用 户 们 需要 阅读 /注意 什么 ”内 
容 是 否 存在 明显 或 者 隐 含 的 次 序 ? 
> 纵 观 整个 网 站 设计 ， 是 和 否 存 在 可 以 且 应 该 在 模板 系统 里 重复 使 用 的 公共 内 容 、 功 能 或 行 
为 模式 ? 
> 是 否 存在 必须 完成 的 任务 ”如 果 存 在 ， 那 么 整个 过 程 包含 了 哪些 步骤， 用 户 会 用 到 哪些 
工具 ? 这些 步 又 是 必须 的 还 是 可 选 的 ?这 些 步 又 里 的 内 容 和 选项 是 否 依赖 于 用 户 之 前 的 
选择 ? 
这 些 高 层次 的 问题 让 我 们 有 机 会 建立 起 界面 规则 和 标准 , 成 为 集中 化 样式 的 基础 和 编码 过 程 
中 的 功能 行为 规则 。 
在 进行 高 级 分 析 的 同时 , 我 们 还 仔细 地 观察 网 页 内 容 和 功能 的 细节 , 以 及 它 在 基本 和 增强 体 
验 中 的 工作 原理 。 
> 该 设计 是 否 需 要 用 Ajax 动态 插 和 内容 ? (在 基础 标记 里 ， 内 容 必须 随 网 页 一 同 输出 ,或 
者 包含 在 一 张 单独 的 HTML 链接 页 面 里 。) 
> 界面 里 是 否 有 某 些 部 分 会 构成 一 种 工作 流 ， 使 某 一 步 中 做 出 的 选择 决定 男 一 步 中 的 选项 ， 
或 者 要 求 传输 细节 信息 到 一 台 服 务 器 来 验证 某 个 选择 ?我 们 需要 确保 在 基本 体验 里 隔离 
所 有 意外 因素 ， 以 帮助 用 户 实现 效率 最 大 化 ， 并 尽 可 能 减少 错误 和 麻烦 。 
> 界面 中 的 某 些 部 分 是 否 会 过 度 占 用 带宽 ,或 者 在 由 标准 HTML 构 成 的 基本 体验 里 难以 使 
用 ? 如果 是 ,我 们 可 以 在 基础 标记 里 提供 简化 的 组 件 ， 也 可 以 鼓励 初级 用 户 使 用 某 种 线 
下 的 替代 方式 来 完成 目标 。 
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最 后 , 我 们 详细 分 析 页 面 中 的 每 一 个 组 件 , 辨识 出 它 的 用 途 , 然后 确定 能 对 其 提供 最 佳 支持 
的 基本 HTML 元 素 。 同 时 ， 我 们 会 思考 可 以 如 何 将 CSS 和 JavaScript 增 强 信 息 应 用 到 这 个 标记 上 ， 
并 评估 这 些 增强 信息 是 否 会 引入 任何 具体 的 可 访问 性 问题 。 

我 们 自己 在 工作 中 经 常会 卷 人 到 有 趣 的 争论 中 , 因为 我 们 试图 搞 清楚 该 如 何 用 有 限 的 HTML 
语句 来 表达 非常 复杂 的 用 户 界 面 。 一 些 基 本 的 HTML 决 策 是 很 直观 的 ， 比 如 简单 的 页 面 标题 和 正 
文 内 容 很 明显 应 该 格式 化 为 标题 和 段落 元 素 。 但 是 其 他 一 些 ( 特别 是 那些 复杂 且 与 标准 HTML 元 
素 没有 明显 对 应 关系 的 交互 组 件 ) 有 时 需要 更 仔细 地 思考 。 

举 个 例子 ， 考 虑 一 下 这 个 过 滤 航 班 时 间 和 价格 的 自 定义 滑 块 控 件 ， 如 图 2-1 所 示 。 




















Refine Your Flight Results 


™ Preferred flight times 


DEPART: 10:00am - 7:30pm 
© 


RETURN: 5:00am - 11:00am 


™ Target price 
$0-$250 
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» Number of stops 


bp Amenities 
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图 2-1 在 一 个 旅行 搜索 网 站 里 用 作 过 滤器 的 滑 块 


怎样 的 HTML 能 够 正确 对 应 这 个 用 于 设置 起 止 时 间 段 的 滑 块 ? 或 者 对 应 设置 美元 价格 上 下 
限 的 滑 块 ?两 者 是 否 相 同 ? 

这 时 就 能 用 到 X 光 透视 法 了 。 我 们 将 注意 力 集中 在 元 素 应 该 传递 什么 信息 ,或 者 需要 从 用 户 
这 里 收集 什么 数据 上 ， 而 不 是 观察 元 素 在 最 终 设计 里 的 外 观 或 者 用 户 交 互 方 式 。Kayak 的 这 些 滑 
块 的 真正 作用 是 什么 ? 

考虑 到 根据 设计 ， 每 个 时 间 段 滑 块 会 收集 两 个 值 (一 个 开始 时 间 和 一 个 结束 时 间 )， 范 围 在 
24 小 时 之 内 。 有 几 个 收集 用 户 输 入 的 标准 HTML 元 素 可 以 很 有 效 地 捕捉 到 那些 值 ,包括 文本 框 或 
者 下 拉 列 表 框 元 素 , 但 是 哪 一 种 能 提供 最 佳 的 用 户 体验 ? 这 个 时 间 选 择 器 还 有 一 组 固定 的 连续 选 
项 ,所 以 一 对 下 拉 列 表 框 元 素 (里 面 可 以 设置 以 15 分 钟 为 间隔 的 标准 时 间 增 量 ) 会 是 用 于 基础 标 
记 的 一 个 不 错 选择 , 因为 它 提供 了 类 似 于 滑 块 刻度 标识 这 样 的 明确 用 户 限 制 条 件 ( 它 只 允许 选择 
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有 效 的 时 间 )。 对 于 增强 体验 而 言 ， 我 们 会 将 下 拉 列 表 框 元 素 的 标记 ( 它们 的 选项 、 值 和 其 他 有 
关 属 性 ) 作为 跳板 ， 用 CSS 和 JavaScript 创 建 一 个 功能 完备 的 滑 块 组 件 ,将 它 的 值 “ 传 送 ” 给 原始 
的 下 拉 列 表 框 元 素 ， 这 样 就 可 以 随 表 单一 起 提交 了 。( 第 16 间 会 详细 讨论 将 渐进 增强 应 用 于 可 访 
问 滑 块 的 建议 。) 

通过 考虑 高 层次 的 内 容 等 级 、 优 先 级 和 分 组 , 再 把 具体 的 内 容 和 组 件 功 能 映射 到 等 价 的 基本 
HIML 上 ， 你 就 有 了 一 张 初步 的 路 线 图 ， 用 来 在 基本 体验 里 编写 简单 的 标记 和 尽 可 能 少 的 样式 ， 
然后 再 加 入 复杂 的 标记 、 样 式 和 脚本 作为 增强 。 


2.1.2 ”编写 基础 标记 和 尽 可 能 少 的 安全 样式 


当 网 页 的 整体 层级 和 每 个 组 件 的 用 途 都 规划 好 后 , 高 效 编写 作为 基本 和 增强 体验 共同 基础 的 
语义 化 HTML 代 码 就 变 得 容易 多 了 。 我 们 将 这 种 HTML 称 为 “基础 ”标记 ， 因 为 它 的 确 是 个 基础 ， 
我 们 会 在 它 上 面 添 加 CSS 和 JavaScript 增 强 ， 从 而 使 最 终 设计 变 成 现实 。 

编写 基础 标记 时 ,首先 处 理 大 的 界面 版 块 (包括 所 有 主要 容器 元 素 ， 比 如 大 标题 、 页 脚 和 栏 
目 设 置 ) 来 稳固 基本 网 页 结构 ,然后 再 处 理 具体 的 组 件 。 接 下 来 ,为 页 面 里 所 有 的 每 个 元 素 填充 
内 容 和 功能 , 特别 注重 使 用 语义 化 HTML 创 建 出 易于 使 用 的 基本 体验 。( 第 3 章 会 讨论 如 何 编写 同 
时 支持 基本 和 增强 体验 的 语义 标记 。 ) 

在 某 些 情况 下 基本 体验 需要 使 用 HTML 元 素来 实现 功能 , 但 是 增强 体验 却 不 需要 。 在 男 一 些 
情况 下 ,标记 只 有 在 增强 体验 里 才 是 合适 和 有 用 的 。 举 个 例子 ， 在 某 个 结果 页 面 的 基本 体验 里 ， 
一 个 被 用 作 过 滤器 的 select 元 素 需要 一 个 按钮 来 提交 表单 ， 而 这 个 按钮 在 增强 代码 里 却 不 是 必须 
的 ， 因 为 JavaScript 可 以 自动 在 “失去 焦点 ”(blur， 即 用 户 完 成 选择 后 将 输入 焦点 移 到 页 面 的 其 
他 位 置 ) 时 提交 表单 。 相 反 , 一 个 打印 按钮 则 需要 JavaScript 才 能 工作 ,， 它 应 该 被 排除 在 基础 标记 
之 外 ， 这 样 就 不 会 在 基本 体验 里 困扰 用 户 ， 当 页 面 被 增强 后 可 以 使 用 JavaScript 再 添加 进去 。 


















































提示 “编写 基础 标记 并 记录 增强 信息 应 该 放置 在 何 处 时 ， 可 以 用 直接 写 在 标记 中 的 HTML 注释 
来 备 忘 ， 比 如 : 
《1-- 这 组 单 选 按钮 会 被 增强 为 滑 块 --> 
或 者 
《1-- 打印 按钮 放 在 这 里 --> 
这 种 注 记 能 在 开发 过 程 中 保留 重要 的 增强 相关 信息 ， 而 且 还 为 将 来 更 新 设计 提供 了 有 用 
的 路 标 ， 或 者 用 于 在 规模 更 大 的 协作 型 设计 小 组 之 间 交 流 沟 通 。 

















编写 基础 标记 时 , 我 们 会 定期 在 众多 浏览 器 和 屏幕 阅读 器 中 预览 页 面 , 检查 内 容 层级 是 否 完 
好 ,网 页 是 否 能 正常 阅读 ,， 是否 有 意义 ,是 否 能 独立 正常 工作 。 使 用 恰当 语义 编写 的 结构 良好 的 
标记 天 生 就 是 可 访问 的 : 链接 和 表单 控件 都 可 以 使 用 键盘 访问 ， 图 像 上 的 alt 文 本 为 屏幕 阅读 器 
和 搜索 引擎 添加 了 文字 注解 ， 整 齐 的 源 代码 顺序 使 网 页 易于 阅读 。 
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这 还 是 一 个 验证 标记 的 好 时 机 ， 对 发 现 标记 错误 和 避免 后 续 漏 洞 可 能 会 非常 有 帮助 。 


提示 “我 们 通常 使 用 的 一 种 验证 工具 是 W3C 提 供 的 ， 网 址 是 : http://validator.w3.org。 





如 果 基 础 代码 已 经 成 形 , 就 可 以 应 用 少量 的 “安全 ”样式 规则 来 改善 基本 体验 的 视觉 外 观 和 
可 用 性 。 安 全 样式 是 非常 简单 的 CSS 规 则 ， 能 在 众多 浏览 器 里 可 靠 地 渔 染 ， 即 使 不 被 支持 也 能 优 
雅 地 降级 。 

安全 样式 通过 外 部 样式 表 应 用 到 基础 标记 上 ， 可 以 包括 字体 序列 ( font family ) 和 非常 有 限 
的 一 组 背景 颜色 、 边 框 、 内 边 距 和 外 边 距 ,， 仅 能 够 传递 基本 的 品牌 特色 以 及 为 内 容 里 的 对 象 创造 
出 舒服 的 间距 ， 以 此 强调 内 容 层 级 ， 并 使 网 页 易于 阅读 和 浏览 。 

一 些 CSS 属 性 可 能 会 被 旧版 或 移动 浏览 器 泻 染 得 出 人 意料 , 因此 避免 在 基本 体验 的 安全 样式 
表 里 使 用 它们 至 关 重 要 。 它们 包括 浮动 、 在 深 色 背景 或 图 像 上 反 白 文字 、 设置 固 定 的 宽度 和 高 度 ， 
溢出 〈overflow ) 属性 以 及 外 边 距 或 位 置 的 负数 值 。( 第 4 章 会 更 详细 地 讨论 如 何 编写 安全 样式 。) 

完成 基础 标记 和 安全 样式 之 后 ， 网 页 应 该 具备 了 完整 的 功能 并 可 以 被 每 个 人 使 用 。 下 一 步 ， 
我 们 会 规划 增强 体验 。 


2.1.3 ”应 用 标记 、 样 式 和 脚本 增强 


编写 增强 组 件 ( 比如 自 定 义 滑 块 控 件 ) 时 ,经 常 需要 调整 基础 标记 ， 从 而 更 好 地 实现 增强 体 
验 。 举 个 例子 ， 我 们 经 常会 给 基础 标记 的 HTML 元 素 添加 ID 和 类 ( class )， 以 建立 应 用 样式 和 行 
为 增强 所 需 的 “挂钩 "。 如 果 在 增强 体验 里 应 用 多 重 背景 图 像 或 者 其 他 视觉 效果 需要 额外 增加 标 
记 ， 还 可 以 看 情况 选择 使 用 span 和 div 标 签 。 因 为 在 基本 体验 的 用 户 眼 中 这 些 属性 和 标签 是 不 可 
见 的 ， 所 以 可 以 将 这 些 无 害 的 元 素 添加 进 基础 代码 里 ， 让 增强 过 程 能 够 更 容易 地 制作 样式 和 
JavaScript 交 互 。 我 们 照旧 还 是 建议 有 选择 及 适度 地 使 用 额外 标记 , 因为 额外 的 标签 会 增加 页 面体 
识 ， 过 多 的 额外 复杂 性 和 网 页 体积 会 对 基本 体验 造成 负面 影响 (增加 下 载 时 间 ) 

编写 完 标 记 后 ， 增 强 的 样式 会 承担 大 部 分 的 重 体力 劳动 ， 将 内 容 移 到 浮动 或 固定 位 置 的 栏目 
中 , 插入 背景 图 像 ,应 用 让 交互 组 件 正常 工作 所 需 的 样式 。 就 其 本 身 而 言 , 它们 可 能 不 会 在 所 有 的 
浏览 器 上 以 同样 的 方式 工作 ， 也 许 需要 分 割 成 多 个 样式 表 ， 在 能 力 测试 通过 后 有 条 件 地 加 以 应 用 。 

这 时 还 应 该 添加 JavaScript 函 数 来 转换 基础 标记 、 操 控 样式 和 添加 行为 ， 将 网 页 转换 成 增强 
体验 ， 并 移 除 只 在 基本 版 网 站 里 有 用 的 标记 。 

另 一 个 关键 在 于 , 要 确保 任何 会 在 增强 体验 里 由 Ajax 添加 或 更 新 的 网 页 内 容 , 都 必须 以 一 种 
可 访问 的 方式 传输 给 基本 体验 里 的 用 户 。 举 个 例子 ,数据 网 格 、 搜 索 结果 页 或 产品 介绍 应 该 由 基 
础 标记 里 的 数据 生成 ， 而 不 是 构造 成 空白 的 div， 在 页 面 加 载 后 再 由 Ajax 生成 。 任 何 更 新 网 页 数 
据 的 过 滤 、 分 页 或 导航 都 应 该 使 用 标准 HTML 表 单 和 链接 制作 ， 以 确保 导航 在 脚本 功能 未 启用 的 
情况 下 也 能 工作 。 这 条 看 似 简单 的 规则 经 常会 被 忽视 ( 可 能 是 考虑 到 了 速度 或 者 响应 性 )， 但 通 
过 本 书 引言 部 分 的 那些 例子 我 们 看 到 ， 对 缺乏 完整 JavaScript 或 CSS 功 能 的 设备 用 户 来 说 , 输出 网 
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页 时 遗漏 必要 内 容 可 能 会 导致 糟糕 的 体验 。 

用 X 光 透视 来 设计 和 开发 网 页 只 需 稍 多 一 些 的 预先 规划 时 间 , 但 是 它 能 带 来 极 大 的 好 处 ， 表 
现在 更 干净 地 区 分 了 标记 、 表 现 和 行为 。 最 重要 的 是 ， 它 让 渐进 增强 这 个 目标 得 以 实现 。 

接 下 来 看 看 4 个 真实 的 设计 案例 (一 个 新 闻 网 站 ， 一 个 零售 结账 表单 ， 一 个 动态 的 预算 规划 
工具 以 及 一 个 照片 管理 应 用 程序 )， 它 们 包含 的 高 级 界面 设计 体现 了 泻 染 或 者 可 访问 性 的 挑战 。 
每 个 案例 都 会 图 解 展 示 如 何 将 一 种 设计 解构 成 基础 标记 、 样式 和 脚本 增强 , 并 重点 强调 如 何在 基 
本 和 增强 体验 里 同时 保持 可 访问 性 。 


2.2 案例 1: 规划 新 闻 网 站 的 结构 和 组 织 方式 


近年 来 ， 新 闻 网 站 已 经 发 生 了 转变 ， 吸 收 了 大 量 的 增强 样式 和 基于 JavaScript 的 功能 ， 比 如 
动画 幻灯 片 、 紧 凑 的 过 滤 和 排序 控件 、 动 态 图表 、 地 图 以 及 其 他 丰富 的 数据 显示 工具 。 虽然 这 些 
增强 功能 显著 改善 了 体验 ,但 是 它们 需要 更 为 复杂 的 代码 结构 ， 并 带 来 了 潜在 的 可 访问 性 挑战 ， 
这 就 让 使 用 渐进 增强 构建 这 类 网 站 成 了 理想 选择 。 

看 看 新 闻 网 站 的 目标 设计 ， 如 图 2-2 所 示 。 
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图 2-2 带 有 互动 功能 的 新 闻 网 站 目标 设计 
这 个 目标 设计 引入 了 许多 交互 组 件 , 包括 一 个 醒目 的 自动 切换 精 选 区 , 一 张 带 有 几 个 过 滤 选 
项 的 文章 链接 列表 ， 以 及 一 个 自 定义 的 股票 报价 搜索 工具 。 
2.2.1 评估 内 容 组 织 和 命名 方式 


首先 , 我 们 会 评估 这 个 最 终 设计 , 理解 内 容 的 分 组 方式 , 并 确定 是 否 有 具备 高 级 功能 的 组 件 
需要 被 映射 为 简单 的 标准 HTML。 











2.2 案例 1: 规划 新 闻 网 站 的 结构 和 组 织 方式 13 








第 一 步 是 组 织 和 命名 网 页 内 高 级 区 域 。 这 个 布局 看 上 去 很 直观 : 从 顶部 开始 是 一 个 刊 头 ， 附 
带 搜索 框 和 徽标 ; 然后 是 一 个 两 级 的 全 局 导航 条 ; 网 页 的 主要 部 分 是 一 大 块 内 容 区 域 , 分 为 三 栏 ; 
页 脚 则 是 版 权 和 支持 链接 。 我 们 会 给 每 一 个 区 域 分 配 一 个 描述 性 的 ID, 简要 并 清楚 地 描述 它 的 用 
途 和 在 网 页 中 的 优先 级 , 而 不 是 它 的 位 置 或 者 样式 ( 因为 这 两 者 会 随 着 网 站 的 扩 版 或 重新 设计 而 
改变 )。 

为 了 组 织 这 些 区 域 ， 我 们 会 将 顶 栏 的 ID 命名 为 masthead ( 刊 头 )， 全 局 导航 是 navigation ( 导 
航 )， 页 脚 栏 是 footer ( 页 脚 )。 为 页 面 主 区 域 中 的 三 栏 命 名 ID 则 有 一 点 点 环 手 。 比 较 平常 的 命名 
方案 是 将 精 选 幻灯 片 栏 命 名 为 featured-content ( 精 选 内 容 ), 中 部 比较 宽 的 一 栏 是 main-content ( 主 
要 内 容 )， 右 手边 有 搜索 和 广告 的 一 栏 是 sidebar ( 侧 边 栏 )。 这 种 命名 惯例 是 可 行 的 ， 因 为 它 足 以 
描述 栏目 的 优先 级 和 相互 关系 。 

我 们 还 应 该 为 每 个 内 容 区 域 分 配 一 个 WALARIA 路 标 角 色 (1landmark role )， 如 图 2-3 所 示 。 
ARIA 是 W3C 创 建 的 一 项 规范 ， 为 屏幕 阅读 器 在 标记 里 添加 额外 的 语义 注释 ， 比 如 特定 组 件 的 角 
色 或 活动 状态 。 路 标 角 色 可 分 配给 静态 内 容 块 以 标明 它们 的 主要 用 途 , 它们 还 是 屏幕 阅读 需 用 户 
在 网 页 中 导航 的 一 种 快捷 方法 ,因为 许多 新 版 屏幕 阅读 器 都 启用 了 这 项 功能 。 路 标的 分 配方 式 是 
role 属 性 和 一 个 被 认可 的 值 ， 比 如 navigation 或 main。 被 认可 的 角色 及 其 描述 的 完整 列表 可 以 在 
最 新 的 WAI-ARIA 规 范 里 找到 : www.w3.org/WAIPF/aria/roles 刘 andmark roles。 
































id="header" role="banner" 


id="navigation" role="navigation" 


id="featured-content" id="main-content" id="sidebar” 
role="complementary" role="main”" role="complementary" 








id="footer" role="contentinfo”" 

















图 2-3 ”这 个 新 闻 网 站 的 主要 布局 块 分 配 到 了 合乎 逻辑 的 ID 名 称 ， 并 被 赋予 了 路 标 角 色 























2.2.2 ”借助 原生 HTML 层 级 功能 实现 内 容 组 织 


在 基本 体验 里 , 你 无 法 使 用 高 级 CSS 和 JavaScript 创 建 多 栏 布局 , 或 使 用 幻灯 片 或 标签 页 来 流 
线 化 呈现 内 容 。 相反 , 基本 体验 必须 完全 依靠 源 代码 顺序 和 语义 标记 结构 来 表示 内 容 组 织 和 优先 











14 第 2 章 渐进 增强 实践 : X 光 透视 








级 。 标 题 (heading ) 元 素 是 以 可 视 化 方式 组 织 网 页 内 容 的 最 重要 工具 之 一 , 它 的 结构 里 内 建 了 层 
级 , 并 为 搜索 引擎 和 使 用 屏幕 阅读 器 的 用 户 提供 了 额外 的 语义 注释 。 我 们 在 此 将 借助 标题 的 原生 
能 力 提 供 大 体 的 结构 。 

编写 基础 标记 时 , 重要 的 一 点 在 于 分 析 所 有 的 网 页 内 容 , 然后 勾勒 出 一 套 相 似 、 全 面 和 一 致 
的 标题 结构 。 下 面 介 绍 如 何 为 新 闻 网 页 建立 标题 结构 ， 从 而 清晰 地 概括 文档 组 织 。 

> 刊 涉 (包括 刊物 的 名 称 《每 日 新 闻 》) 被 标记 为 一 个 hi 元 素 ， 因 为 它 是 网 页 里 最 突出 和 最 

重要 的 标题 。 

> 主要 内 容 区 分 成 三 栏 : 精 选 (Features )， 文章 ( Stories ) 和 包括 一 个 股票 报价 搜索 工具 和 

广告 的 侧 边 栏 。 每 一 栏 的 顶部 标题 都 被 标记 为 一 个 h2 元 素 。 

> 每 一 栏 里 的 内 容 对 象 ， 比 如 幻灯 片 标题 、 链 接 文 章 标 题 和 市 场 数据 标签 都 被 标记 为 h3 

元 素 。 

以 这 种 方式 运用 的 标题 元 素 能 帮助 一 般 用 户 和 屏幕 阅读 器 用 户 辨 认 出 内 容 层 级 。 默 认 情 况 
下 ， 浏 览 器 会 将 标题 元 素 按照 字体 大 小 分 级 泻 染 ， 从 非常 大 (hl ) 到 小 〈n6 )。 在 基本 体验 里 ， 
我 们 以 浏览 器 默认 的 字体 大 小 作为 标题 的 样式 ， 这 样 它们 看 上 去 比 普通 文字 更 大 。 

使 用 标题 元 素 , 新 闻 页 面 就 有 了 层级 和 顺序 , 并 且 还 有 其 他 好 处 , 那 就 是 能 帮助 那些 只 依靠 
页 面 结 构 来 导航 的 屏幕 阅读 器 用 户 。 如 今 , 大 多 数 现代 屏幕 阅读 器 都 提供 了 某 种 控制 方式 ， 让 用 
户 可 以 顺 着 网 页 标题 〈 以 及 段落 和 列表 ) 浏览 内 容 。 

































































2.2.3 构建 导航 


增强 体验 里 的 顶部 导航 是 一 个 紧凑 的 横 条 , 通过 变换 选择 的 一 级 导航 选项 的 背景 颜色 来 提供 
状态 反馈 ， 并 将 它 与 二 级 导航 选项 分 到 一 组 ， 如 图 2-4 所 示 。 
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图 2-4 ”新 闻 网 站 目标 设计 里 的 顶部 导航 


在 基本 体验 里 , 这 个 导航 的 最 佳 表现 形式 是 一 个 无 序列 表 ， 因 为 它 能 体现 出 选择 的 一 级 导 
航 选项 与 它 的 次 级 导航 选项 列表 之 间 的 层级 关系 。 每 个 列表 项 都 包括 一 个 链接 ， 在 基本 和 增强 
体验 里 点 击 后 都 会 刷新 页 面 。 在 基本 版 的 网 页 中 ， 导 航 链接 的 无 序列 表 被 泻 染 成 一 长 列 般 套 的 
链接 。 

当 它 被 放置 在 源 代 码 顺序 的 顶部 时 ( 仅 低 于 刊 兴 )， 在 移动 设备 和 屏幕 阅读 器 上 使 用 键盘 命 
令 进 行 网 页 导航 的 用 户 , 可 能 不 得 不 滚动 或 看 完 这 长 长 的 一 列 选项 才能 到 达 更 重要 的 精 选 内 容 部 
分 , 所 以 更 好 的 做 法 是 提供 一 个 可 选 链 接 : 让 用 户 跳 过 在 每 个 页 面 上 都 重复 出 现 的 导航 元 素 。 你 
只 需 附 上 一 个 标注 为 “ 跳 转 到 内 容 ”( Skip to content ) 的 销 链 接 ( anchor link )， 如 图 2-5 所 示 。 将 
它 的 href 值 设置 成 主 内 容 区 域 的 id (本 案例 中 是 content ) 即 可 : 


<a href="#content">Skip to content</ay> 
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图 2-5 用 户 在 基本 体验 里 见 到 的 顶部 导航 无 序列 表 ， 上 方 有 “ 跳 转 到 内 容 ” 链 接 
我 们 在 设计 中 选择 只 显示 选中 项 目的 次 级 导航 ,但 是 别 忘 了 所 有 10 个 顶级 新 闻 分 类 相关 的 子 
菜单 可 能 有 50~80 个 菜单 项 ,或 者 更 多 。 针 对 那些 有 着 数 以 百 计 选项 的 复杂 或 深度 虞 套 的 导航 系 
统 , 我 们 有 时 会 在 源 代码 顺序 里 把 导航 标记 放置 在 网 页 内 容 的 下 方 , 这 样 用 户 就 不 会 在 每 次 载 人 
新 页 面 时 都 遇 上 ( 然后 不 得 不 跳 过 ) 整 个 导航 。 这样 可 以 在 更 靠近 屏幕 顶 部 的 地 方 显示 主要 内 容 ， 
使 手机 或 屏幕 阅读 器 用 户 能 够 更 容易 地 进行 快速 访问 。 


























提示 “采用 这 种 替代 方法 时 ， 为 键盘 用 户 提供 一 个 位 于 顶部 的 Jump to navigation ( 跳 至 导航 ) 链 
接 会 很 有 帮助 ， 能 让 他 们 快速 访问 到 底部 的 导航 块 。 


2.2.4 处理 分 层 和 动画 内 容 


页 面 主 内 容 区 域 的 第 一 个 内 容 栏 里 包含 一 张精选 幻灯 片 ， 带 有 动画 渐变 和 和 暂停 /播放 控件 。 
这 个 幻灯 片 很 花哨 ， 但 从 基本 层面 看 ， 它 其 实 只 是 用 一 种 紧凑 的 方式 显示 多 篇 精 选 文章 的 链接 ， 
每 一 篇 都 带 有 一 张 图 片 、 一 个 链接 到 详细 内 容 页 面 的 文章 标题 以 及 一 段 文 字 说 明 。 如 果 用 X 光 透 
视 观察 此 组 件 , 那么 这 张 幻 灯 片 可 以 简单 地 使 用 一 连 串 内 容 块 组 建 , 然后 将 它们 写 入 页面 成 为 基 
础 标记 的 一 部 分 ， 这 样 无 需 JavaScript 也 能 访问 ， 之 后 再 为 有 能 力 的 浏览 器 增强 成 幻灯 片 。 

在 基本 体验 里 , 幻灯 片 的 所 有 内 容 都 可 以 格式 化 成 静态 的 电影 胶片 形式 , 同时 显示 所 有 照片 
和 文字 说 明 。 通 过 这 种 方式 ， 所 有 内 容 都 可 见 而 且 可 以 访问 , 我 们 能 很 容易 地 将 这 组 内 容 块 转换 
成 增强 的 幻灯 片 体验 。 

这 张 幻灯 片 的 控件 ( 暂停 /播放 、 上 一 页 和 下 一 页 等 控件 用 于 在 多 张 幻灯 片 中 导航 ) 只 在 有 
脚本 和 CSS 增 强 的 体验 里 才 是 必需 的 ， 在 基础 标记 里 完全 可 以 省 略 ， 当 能 力 测试 通过 后 再 用 
JavaScript 插 进去 ， 如 图 2-6 所 示 。 
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基本 体验 增强 体验 


FEATURES ©0006 4 





[人 
由 


Profits Soar for Green Technology 
By John Jackson, Two hours ago 


Profits Soar for Green 
Technology 
Bohn Jackson, 7 





Bridge Infrastructure in Need of Repair 
By Natalie Walsh 5 minutes ogo 








ing in Vancouver: A Lost Art 
By Nathan William, 6 hours ogo 


图 2-6 ”增强 体验 里 的 动画 幻灯 片 基于 基本 体验 里 一 连 串 具备 完整 可 访问 性 的 内 容 块 
某 些 情况 下 , 在 基础 标记 里 输出 所 有 精 选 内 容 可 能 太 占 带宽 。 如 果 事 实 的 确 如 此 , 男 一 种 可 
行 的 方法 是 让 基础 代码 只 包括 一 篇 精 选 文章 ,以 此 减少 网 页 体积 , 然后 再 为 增强 体验 里 的 用 户 用 
Ajax 将 其 余 文 章 标记 载 人 页 面 。 
2.2.5 ”支持 动态 过 滤 和 排序 
这 张 网 页 在 精 选 块 的 旁边 显示 了 一 排 文 章 列表 ， 用 户 可 以 过 滤 最 新 ( latest )、 最 热门 ( most 
popular )、 邮 寄 最 多 ( most emailed ) 或 者 最 受 博客 作者 关注 ( most blogged ) 的 文章 ,如 图 2-7 所 示 。 


STORIES Latest Popular Emailed Blogged 


















































Bonds Boom In Asia 
By Mary Smith, 7 minutes ago 


Analysts are calling this one of the better 
days in recent history for bond traders. 


Carmakers Target Lower Emissions 
By Richard Spent 25 minutes ga 


Increasing fuel economy at an affordable 
price has auto makers scrambling for tech, 


Housing Market: Slow and Steady 


By Mary Smith, 2 hours go 


Although the picture on Main Street isnt rosy 
as Wall Street , things are improving a bit. 


More business stories 


图 2-7 在 增强 体验 里 ， 过 滤 链 接 使 用 Ajax 动 态 载 和 新 的 文章 
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通过 X 光 透视 我 们 发 现 ， 如 果 这 个 页 面 一 开始 基于 默认 过滤 选项 (“最新”) 加 载 一 组 初始 文 
章 , 并 将 过 滤 控 件 制作 成 标准 链接 ,点 击 后 用 替代 组 文章 刷新 页 面 , 那么 这 项 功能 对 基本 体验 里 
的 所 有 人 来 说 都 是 可 访问 的 ， 如 图 2-8 所 示 。 























Stories 
Sort by: Latest Popular Emailed Blogged 





Bonds Boom in Asia 
By Mary Smith, 7 minutes ago 
Analysts are calling this one of the better days in recent history for bond traders. 


Car Makers Target Lower Emissions 
By Richard Spent, 25 minutes ago 
Increasing fuel economy at an affordable price has auto makers scrambling for tech. 























图 2-8 在 基本 体验 里 ， 过 滤 文 章 视 图 通过 普通 链接 进行 切换 
在 基础 标记 里 ,每 个 过 滤 链 接 的 href 属 性 都 会 包括 一 些 参 数 , 用 过 滤 之 后 的 文章 列表 来 刷新 
网 页 。 在 增强 版 本 里 ， 可 以 使 用 JavaScript 来 截获 点 击 某 个 链接 的 操作 ， 解 析 链 接 的 href 值 ， 然 后 
用 Ajax 动态 重新 生成 文章 列表 ， 而 不 是 请 求 刷新 网 页 。 
这 项 功能 还 可 以 用 带 有 单 选 按钮 的 小 型 表单 实现 ,或 者 用 一 个 包含 排序 选项 的 select 控 件 ， 
再 加 上 一 个 “发 送 ” 按 钮 来 提交 表单 。 至 于 如 何 选 择 在 基本 标记 里 实现 像 这 样 的 特定 交互 方式 ， 
取决 于 服务 器 的 设置 ， 以 及 感 党 上 哪 种 方式 最 可 用 、 最 适合 目标 设计 。 


2.3 案例 2: 结账 表单 中 的 工作 流 、 验 证 和 数据 提交 


请 思考 一 种 通常 会 采用 增强 动态 功能 的 在 线 案例 : 电子 商务 结账 表单 。 

许多 当代 的 结账 页 面 使 用 由 JavaScript Ajax 和 高 级 CSS 控 制 的 功能 来 实现 高 效 、 愉 快 的 交易 ， 
将 出 错 的 机 会 降 至 最 低 ， 从 而 大 大 增强 用 户 的 信心 。 举 个 例子 , 结账 页 面 通常 包含 这 些 功能 : 表 
单元 素 根据 用 户 输入 渐进 地 显示 出 必 填 字段 ; 对 表单 元 素 进行 即时 数据 验证 、 高 亮 和 错误 反馈 ; 
在 表单 字段 边 上 甚至 内 部 显示 帮助 文字 和 操作 指南 等 提示 ; 滑 块 和 日 历 等 高 效 的 数据 输入 组 件 。 
这 些 功 能 从 视觉 上 对 表单 进行 了 组 织 , 将 焦点 和 信息 放 在 用 户 最 需要 的 地 方 , 并 让 表单 变 得 更 吸 
引 人 和 易于 使 用 。 

缺点 在 于 , 这些 功 能 离开 JavaScript 和 CSS 后 会 变 得 不 好 用 ,甚至 完全 失效 ,可 能 导致 一 部 分 
用 户 因 为 浏览 器 太 旧 、 系 统 太 慢 或 者 使 用 手机 而 被 拒 之 门 外 。 大 多 数 在 线 销售 企业 花费 了 大 量 的 
时 间 和 努力 说 服 人 们 在 他 们 的 网 站 上 购物 , 如 果 因 为 开发 者 决定 走 捷 径 而 导致 哪怕 只 有 一 名 顾客 
止步 于 最 终 的 结账 页 ， 都 是 不 可 接受 的 。 

那么 , 观察 一 种 包含 某 些 高 级 功能 的 结账 页 设计 , 看 看 如 何 设 计 方 案 , 从 而 在 基础 标记 里 提 
供 所 有 必需 的 内 容 和 功能 ， 并 为 向 有 能 力 的 现代 浏览 器 添加 增强 功能 而 铺 平 道路 。 


2.3.1 解构 结账 表单 设计 
我 们 的 目标 设计 是 一 种 紧凑 的 结账 工作 流 , 将 数 个 单独 的 步骤 组 合 到 一 个 页 面 中 , 如 图 2-9 所 示 。 
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1-Step Checkout 


Ship to 


We will never mail 





NAME 
| Frank Blankwell 





STREET ADDRESS 
| 100 North Main St 
| Unit3 








cm AE 2 
[Boston (va BB [oz 


Optional: Gift options 


Payment 


CARD NUMBER 
[1234567890112233 
EXPIRATION MONTH AND YEAR VERIFICATION NUMBER 
[oanuy BEB ln ] warns 
NAME ON CARD 
Frank Blankwell 


图 Billing address is the same as s| 





a = 
Submit my order 0 





图 2-9 一 种 高 级 结账 交易 页 的 目标 设计 


制作 可 访问 结账 表单 的 第 一 步 是 站 在 高 处 审视 目标 设计 ， 找 出 所 有 无 法 精确 映射 到 标准 
HTML 的 功能 或 组 件 。 不 少 高 级 功能 立即 映 入 我 们 的 眼帘 。 
> 多 列 布局 、 设 计 丰 富 的 表单 区 域 。 
P 有 着 独特 品牌 视觉 风格 的 自 定义 样式 下 拉 列 表 框 ， 以 及 在 礼品 选项 和 信用 卡 选择 控件 里 
用 来 提供 反馈 的 缩 略 图。 
> 一 组 由 单 选 按钮 实现 并 以 标签 形式 工作 的 支付 选项 ， 每 一 项 都 显示 了 一 组 独特 的 表单 控 
件 ， 用 于 收集 这 类 支付 方式 的 信息 。 
> 一 个 自 定 义 样式 的 提交 按钮 。 
需要 理解 这 些 功 能 和 交互 方式 在 基本 体验 里 应 该 如 何 工 作 ， 因 为 不 能 依靠 JavaScript 来 实现 
输入 限制 、 验 证 、 反 馈 或 交互 。 
对 于 数据 输入 密集 型 表单 界面 而 言 , 我 们 尤其 应 该 将 X 光 视图 主要 用 于 辨认 和 分 离 增 强 界面 
中 的 任何 下 列 情况 : 采用 复杂 的 错误 条 件 反 馈 ， 从 某 一 区 域 到 男 一 区 域 动态 生成 数据 ,根据 用 户 
选择 显示 可 选项 。 在 基本 体验 里 处 理 这 些 功能 需要 与 服务 器 交互 , 所 以 关键 在 于 找 出 那些 功能 
需要 服务 器 提供 数据 或 进行 验证 的 关键 工作 流 节点 , 并 组 织 好 使 用 体验 , 以 一 种 符合 逻辑 的 无 错 
方式 为 用 户 提供 恰当 的 支持 。 
从 表单 的 项 部 开始 , 我 们 能 看 到 一 个 很 直观 的 配送 地 址 块 。 它 包括 一 组 文本 输入 框 和 下 拉 列 
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表 框 ， 而 且 在 增强 体验 里 不 需要 使 用 JavaScript 来 实现 交互 。 虽 然 礼 品 选项 (Gift Options ) 块 的 
设计 要 用 到 自 定 义 功 能 ， 比 如 为 每 个 选项 显示 不 同 的 图 标 , 但 数据 输入 机 制 却 有 着 类 似 明确 的 功 
能 性 ， 就 像 一 个 标准 的 select 元 素 那样 ， 不 需要 进行 繁琐 的 验证 或 者 引入 复杂 的 业务 规则 。 

在 将 X 光 透视 法 应 用 到 支付 版 块 时 ,我 们 面临 着 一 个 重要 的 决策 : 增强 版 页 面 的 组 织 方式 是 
一 个 由 单 选 按钮 构成 的 标签 条 , 基于 用 户 的 交互 操作 来 显示 每 种 支付 方式 独 有 的 表单 控件 ; 服务 
器 根据 选择 的 单 选 按钮 选项 动态 获取 相应 的 表单 控件 组 信息 。 但 是 , 在 基本 体验 里 , 我们 并 没有 
动态 激活 或 禁用 多 个 表单 字段 这 样 的 优越 条 件 。 

我 们 本 可 以 在 一 个 页 面 里 显示 一 个 非常 长 的 表单 ,将 三 种 支付 方式 列 在 它们 对 应 的 单 选 按钮 
下 面 , 但 是 这 种 格式 的 可 用 性 不 高 。 它 将 不 合理 的 负担 抛 给 了 购物 者 , 让 他 们 去 理解 技术 局 限 性 ， 
填写 只 和 他 们 选择 的 支付 方式 有 关 的 表单 字段 , 并 跳 过 与 其 他 支付 类 型 有 关 的 那些 表单 元 素 。 这 
可 能 会 给 用 户 带 来 错误 、 困 惑 、 烦 恼 ， 最终 的 必然 结果 就 是 放弃 结账 。 

更 好 的 选择 是 将 表单 分 成 多 屏 显 示 ， 将 整个 流程 分 成 逻辑 合理 的 多 步 ， 从 而 提供 服务 器 端 验 
证 以 及 根据 用 户 输入 而 定 的 适当 差别 体验 。 这 种 分 离 的 步骤 还 有 一 项 好 处 : 它 使 前 面 步 又 中 获取 的 
内 容 可 以 被 导入 后 续 步 又 中 ,比如 ,在 第 一 个 块 里 输入 的 配送 地 址 可 以 用 于 生成 第 三 步 的 支付 版 块 。 
带 着 这 个 规划 ,我 们 下 一 步 的 X 光 流程 是 观察 增强 目标 设计 的 每 一 部 分 , 仔细 辨识 各 种 可 能 
性 ， 并 将 增强 组 件 映 射 到 基本 的 HTML 等 价 元 素 上 。 

前 两 个 版 块 ( 配送 地 址 Ship To 和 礼品 选项 ) 里 面 不 存在 依赖 关系 ， 而 且 逻 辑 上 是 一 体 的 ， 
所 以 我 们 会 把 这 两 个 版 块 作为 基本 体验 里 的 第 一 步 ， 如 图 2-10 所 示 。 
































Ship to ® /0 Checkout: Step 1 
上 


Checkout 


Shipping options 








Allfields are required 











Unit3 








Happy birthday Bobl 02111 | 





OPTIONAL: Gift options 
Personalize your gift with wrapping paper 
da card. 


Gift wrap this order ($5.00 extra) 
[No gift wrap | 


Include a gift card (Free) 
[ No gift card 


Message on card 





, 


图 2-10 ”增强 表单 的 前 两 个 版 块 ( 左 图 ) 在 基本 体验 里 被 组 合 在 一 起 ， 
成 为 多 屏 结账 向 导 里 的 第 一 步 〈 右 图 ) 
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在 礼品 选项 版 块 的 增强 体验 中 ， 礼 品 包 装 〈 gift-wrap ) 和 礼品 卡 〈 gift-card ) 字段 要 求 是 自 
定义 的 下 拉 列 表 菜 单 , 这 样 才能 为 每 种 选项 提供 相应 的 缩 略 图 。 通过 在 基础 标记 里 先 添加 一 个 标 
准 的 select 元 素 ， 我 们 就 能 为 基本 体验 提供 一 个 可 以 完美 工作 ( 只 是 缺少 缩 略 图 ) 的 菜单 版 本 ， 
然后 再 在 浏览 器 有 能 力 支 持 时 将 其 增强 成 一 个 自 定义 下 拉 列 表 框 。( 第 17 章 会 详细 讨论 如 何 创建 
自 定义 的 下 拉 列 表 框 )。 

礼品 卡 附 言 ( gift-card message ) 只 有 在 购物 者 选择 了 一 张 礼品 卡 时 才 有 用 ， 因 此 这 个 字段 
在 增强 体验 里 会 被 隐藏 起 来 , 直到 用 户 选 择 礼品 卡 后 再 显示 。 不 过 , 礼品 卡 附 言 字段 应 该 包括 在 
基础 标记 中 , 这样 它 在 基本 体验 里 才能 被 访问 ,如果 购物 者 不 选择 礼品 卡 ， 则 会 直接 跳 过 这 个 礼 
品 卡 附 言 字 段 。 虽 然 显 示 出 一 个 非 必需 的 表单 字段 不 够 理想 ， 但 好 在 只 有 一 个 ， 而 且 标 注 明 确 ， 
所 以 它 的 存在 不 太 可 能 会 让 用 户 感到 困惑 或 者 给 他 们 增加 太 大 的 负担 。 

现在 来 处 理 支 付 ( Payment ) 版 块 。 在 增强 体验 里 ， 这 个 界面 中 的 支付 类 型 选项 是 一 排 紧 凑 
的 单 选 按钮 ， 并 预先 在 默认 页 面 里 填 人 与 最 常用 的 选项 〈 信用卡“Credit Card”) 有 关 的 表单 字 
段 和 内 容 ， 如 图 2-11 所 示 。 





















































Payment 个 credit card Debit card 了 Personal check 


还 American Express 四 1234567890112233 
EXPIRATION MONTH AND YEAR VERIFICATDON NUMBER 
01- January 目 2012 目 4011 Whats th 
NAME ON CARD 


Frank Blankwell 
回 Billing address is the same as shipping address 
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图 2-11 增强 体验 里 的 支付 版 块 默认 显示 最 流行 的 选项 ， 
在 这 个 案例 中 是 信用 卡 表单 


在 基本 体验 里 ， 我 们 可 以 将 支付 选项 列 在 步骤 一 页 面 的 底部 ， 配 送 地 址 和 礼品 选项 的 下 方 ， 
因为 从 技术 上 看 这 一 步骤 没有 事先 必须 满足 的 前 置 条 件 。 但是， 从 名 用 户 的 角度 看 ,支付 选项 可 
能 会 显得 格格 不 入 (缺乏 逻辑 相关 性 )， 这 可 能 会 造成 困扰 。 男 外 ， 我 们 希望 购物 者 能 够 从 最 后 
的 确认 页 面 跳 回 之 前 的 某 一 步 进行 修改 , 因此 如 果 将 配送 和 支付 步骤 清楚 地 分 开 , 修改 就 会 容易 
得 多 。( 这 一 要 求 在 增强 体验 里 不 是 必需 的 ， 因 为 所 有 内 容 在 单 页 表单 中 都 可 见 )。 

这 样 的话 ， 基 本 结账 体验 的 第 二 步 就 会 是 一 张 很 简单 的 页 面 ， 由 三 个 单 选 按 钮 组 成 各 种 支 
付 选项 。 表 单 在 提交 后 会 向 服务 器 发 送 一 个 请 求 ， 然 后 根据 用 户 的 选择 获取 正确 的 支付 字段， 
如 图 2-12 所 示 。 
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图 2-12 在 基本 体验 里 用 
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在 下 一 个 界面 中 ， 服 务 器 将 根据 用 户 是 选择 信用 卡 、 借 记 卡 〈 debit card ) 还 是 个 人 支票 


( personal check ) 选择 性 输出 三 张 支付 表单 的 其 





中 一 张 。 


如 果 支 付 方式 是 信用 卡 或 借 记 卡 ， 则 会 显示 一 个 账单 寄 送 地 址 (billing address ) 块 ， 用 于 验 
证 卡片 信息 。 因 为 配送 地 址 已 经 发 给 了 服务 器 ， 所 以 可 以 给 购物 者 提供 一 个 复 选 框 ， 如 果 账 单 寄 
送 地 址 和 配送 地 址 相同 ， 他 们 就 无 需 输 入 这 一 项 。 在 增强 体验 里 ， 选 中 这 个 复 选 框 后 JavaScript 
会 隐藏 账 单 寄 送 地 址 字段 。 在 基本 体验 里 , 选中 这 个 复 选 框 则 会 完全 跳 过 下 一 个 界面 里 要 求 输入 





账单 寄 送 地 址 的 表单 ， 如 图 2-13 所 示 。 
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基本 体验 里 的 支付 工作 流 。 那 些 在 信 








] 卡 页 面 (中 图 ) 里 选中 











同 ” (same billing address ) 复 选 框 的 




















press card ending in 2233 


“与 账单 寄 送 地 址 相 


] 户 ， 将 会 跳 过 账单 寄 送 地 址 页 面 ( 右 图 ) 


基本 结账 体验 包含 了 一 张 最 终 复查 页 , 反馈 了 在 整个 工作 流 里 输入 的 所 有 数据 , 其 中 每 一 个 
版 块 边 上 都 有 一 个 编辑 (Edit ) 按钮 ， 能 将 用 户 带 回 该 步 又 。 因 为 基本 结账 体验 包含 了 横 跨 多 张 
页 面 的 一 系列 表单 , 所 以 用 户 的 选择 和 输入 数据 应 该 在 表单 提交 前 展示 给 他 们 进行 复查 , 使 他 们 


有 机 会 发 现 和 修正 错误 ， 如 





图 2-14 所 示 。 
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图 2-14 ”基本 体验 里 的 订单 复查 和 确认 页 
这 一 页 只 存在 于 基本 体验 里 。 在 增强 体验 中 , 整个 结账 流程 在 一 个 页 面 内 完成 , 所 以 用 户 自 


始 至 终 都 可 以 复查 和 修改 信息 。 





总 结 一 下 : 基本 结账 体验 包括 5 个 单独 的 步骤 ， 基 于 业务 规则 对 用 户 工作 流 进 行 分 流 ， 并 一 


路 验证 ， 如 图 2-15 所 示 。 
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(1) 配送 地 址 和 礼品 选项 。 

(2) 支付 方式 〈 信用卡、 借 记 卡 、 支 票 )。 

(3) 支付 细节 (根据 步骤 (2) ) 中 用 户 的 选择 显示 自 定义 表单 字段 。 
(4) 支付 账单 寄 送 地 址 ( 只 适用 于 信用 卡 和 借 记 卡 这 两 个 选项 )。 
(5) 复查 订单 。 


2.3.2 ”标记 表单 以 确保 可 访问 性 


要 以 最 具 可 访问 性 的 方式 构建 结账 表单 , 关键 在 于 选择 正确 的 HTML 标记 结构 , 并 且 要 特别 
注意 考虑 潜在 的 语义 。 我 们 是 否 已 经 尽 最 大 可 能 为 表单 元 素 的 组 织 和 编码 增加 描述 性 和 可 用 性 ? 
比如 ， 每 个 表单 元 素 都 应 该 附带 一 个 恰当 的 标签 ,并 尽 可 能 提供 最 佳 的 用 户 体验 ( 表现 在 易于 使 
用 以 及 进行 恰当 的 限制 避免 错误 上 )。 

在 基础 标记 中 , 每 一 张 结账 页 开头 的 form 标 签 都 必须 将 action 属 性 指向 将 会 处 理 此 表单 的 服 
务 器 资源 〈 比如 一 个 PHP 文 件 )。 在 结账 过 程 的 每 一 步 ， 表 单 控件 要 根据 逻辑 关系 分 组 到 一 个 
fieldset 元 素 中 ， 每 个 input 元 素 上 方 的 标签 只 能 用 最 少 的 样式 ( 不 要 设置 表单 元 素 的 浮动 或 者 
宽 /高 属性 )。 在 每 一 页 的 底部 要 提供 一 个 用 来 提交 表单 的 下 一 步 ( Next Step ) 按钮 ， 将 用 户 引 至 
结账 过 程 的 下 一 个 步 又， 还 有 一 个 返回 〈Back ) 链接 ， 用 于 将 购物 者 带 回 之 前 的 页 面 。 

我 们 的 增强 结账 表单 设计 包含 了 一 些 内 髓 缩 略 图 的 自 定义 样式 下 拉 列 表 菜 单 : 礼品 包装 选 
项 、 礼 品 卡 选项 和 一 个 自 定 义 信 用 卡 选择 工具 。 这 里 的 关键 是 要 在 基础 标记 里 使 用 一 个 基本 的 
HTML select 元 素 ,， 这样 才 能 确保 任何 用 户 都 能 选择 相关 的 所 有 功能 ， 然 后 在 某 种 浏览 需 通 过 能 
力 测试 后 再 用 自 定义 样式 增强 那个 select 元 素 ， 如 图 2-16 所 示 。 
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图 2-16 “基本 体验 使 用 了 一 个 标准 的 HTML select 元 素 ( 左 图 ) ， 在 增强 体验 里 则 转 
变 成 了 一 个 带 有 缩 略 图 的 自 定义 样式 select ( 右 图 ) 

















注意 要 详细 了 解 如 何 制作 自 定义 样式 的 下 拉 列 表 框 ,参见 第 17 章 。 


这 个 自 定义 样式 的 “提交 我 的 订单 ”( Submit My Order ) 按钮 是 体现 正确 选择 标记 重要 性 的 
另 一 个 例子 。 最 新 的 HTML 规 范 (4.01 ) 提 供 了 两 种 元 素 : 一 种 是 将 type 属 性 设置 为 submit 的 input 
元 素 ， 另 一 种 是 button 元 素 。 两 者 天 生 就 是 用 来 提交 表单 数据 的 ， 但 是 button 元 素 在 XHTML 一 
个 名 为 XHTML-MP (mobile profile 移动 配置 ) 的 子规 范 中 被 略 去 了 ， 因 此 如 果 浏 览 器 的 泻 染 依 
照 的 是 XHTML-MP 规 范 , 就 不 会 支持 这 个 元 素 。 相 反 , input 元 素 则 能 被 任何 一 种 浏览 器 支持 (只 
要 它 遵 循 HTML 2 或 之 后 的 规范 )， 能 在 包括 小 众 和 旧式 移动 浏览 器 在 内 的 最 广泛 的 浏览 需 中 工 
作 。 我 们 想 要 确保 任何 交易 过 程 都 能 可 靠 地 在 所 有 地 方 工作 ,服务 于 任何 人 ,因此 推荐 在 这 里 使 
用 input 元 素 ， 如 图 2-17 所 示 。 
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Submit my order Submit my order 


图 2-17 基础 标记 里 使 用 了 广泛 兼容 的 input 元 素 ( 左 图 ) ， 在 增强 
体验 里 则 有 着 自 定义 的 样式 〈 右 图 ) 
通过 应 用 一 些 自 定义 样式 让 ;input 提交 元 素 的 外 观 和 行为 像 一 个 按钮 ， 任 何 地 方 的 用 户 都 能 
得 到 满意 、 可 预测 及 可 靠 的 体验 。( 第 14 章 将 描述 开发 自 定义 按钮 的 推荐 流程 。) 

















2.3.3 添加 限制 与 验证 


确保 购物 者 在 结账 过 程 中 输入 有 效 信息 对 于 完成 交易 来 说 非常 关键 。 作 为 设计 者 ， 可 以 使 用 3 
种 技巧 来 确保 输入 的 是 有 效 数 据 : 提供 操作 说 明和 帮助 文字 来 展示 正确 的 格式 , 添加 限制 来 避免 无 
效 输入 ， 以 用 户 反馈 的 形式 实施 验证 逻辑 (在 屏幕 上 告知 用 户 他 们 的 输入 无 效 ， 需 要 进行 修正 )。 

提供 操作 说 明和 示例 数据 是 我 们 这 些 验证 选项 中 最 友好 的 一 种 。 从 一 开始 就 提示 正确 的 格式 
对 于 减少 无 效 数 据 而 言 大 有 帮助 。 我 们 建议 或 者 直接 在 页 面 上 显示 帮助 内 容 , 或 者 根据 上 下 文 的 
具体 情况 在 特定 字段 边 上 跳出 辅助 提示 ， 以 此 保持 整个 体验 的 清爽 , 并 帮助 用 户 把 注意 力 集中 在 
手头 的 问题 上 ， 如 图 2-18 所 示 。 




















Verification number VERIFICATION NUMBER Thisisthe4digit number found 
4 | a 1 ti on the front of your AMEX card 
| 到 4011 el above the card number. 





This is the 4 digit number found on the front 
of your AMEX card above the card number 


图 2-18 ”操作 说 明 能 帮助 减少 数据 错误 。 在 基本 体验 里 他 们 应 当 被 放置 在 页 面 上 
( 左 图 ) ， 在 增强 体验 里 则 可 以 选择 性 地 显示 ( 右 图 ) 


还 可 以 限制 用 户 必须 输入 有 效 的 数据 值 ,方法 是 提供 那些 只 接受 有 效 输 入 的 控件 和 增强 组 件 
( 比如 复 选 框 、 单 选 按 钮 、 下 拉 列 表 框 、 自 动 完成 式 文本 输入 框 、 滑 块 或 者 日 历 式 日 期 选择 器 )， 
并 运用 渐进 式 展开 ( progressive disclosure ) 的 方式 ， 只 显示 手头 任务 所 需 的 表单 元 素 。 

如 果 设 计 需 要 用 到 文本 input 这 样 的 自由 文本 输入 控件 来 输入 信用 卡号 码 ， 我 们 可 以 在 基本 
体验 里 提供 操作 说 明文 字 , 然后 配置 服务 器 端的 验证 来 检查 输入 值 , 确保 它 是 正确 的 类 型 ( 例如 
数值 型 ), 在 可 接受 的 输入 值 范 围 内 (例如 15 位 )， 如 有 必要 还 可 以 增加 更 为 复杂 的 算法 辨识 出 数 
字模 式 以 匹配 特定 的 卡片 种 类 ， 如 图 2-19 所 示 。 


A Card number CARD NUMBER This is not a valid American Express 
ee pr ) 

A card number. Please check to 
| 1234567890112233 Ll Ta: ensure this is the 15 digit number 
This is not a valid American Express on the front of your card. 
card number. Please check to 


ensure this is the 15 digit number 
on the front of your card. 


图 2-19 ”基本 体验 里 的 信用 卡号 码 验 证 需要 提交 表单 ( 左 图 ) 。 在 增强 体验 里 ， 输 入 
的 内 容 可 以 用 JavaScript 即 时 验证 ， 错 误 消息 以 弹出 提示 的 形式 显示 ( 右 图 ) 
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基本 体验 需要 与 服务 器 交互 才能 提供 验证 反馈 和 根据 相关 上 下 文 环 境 隐 藏 /显示 表单 字段 。 用 
户 点 击 “ 提 交 我 的 订单 ”按钮 后 ， 服 务 器 可 以 验证 表单 数据 ， 检 查 是 否 有 必 填 字段 漏 填 或 者 字段 
包含 无 效 数据 值 ， 然 后 让 用 户 返 回 到 相关 页 面 ， 并 提供 明确 的 消息 ， 告 知 哪些 地 方 需要 更 正 。 服 
务 器 还 可 以 协调 接 下 来 显示 哪些 表单 字段 ， 比 如 根据 用 户 选 择 的 支付 方式 该 显示 哪 张 支付 表单 。 
在 增强 体验 里 ， 大 多 数 这 些 用 户 限制 和 验证 行为 可 以 使 用 Ajax 实 时 完成 ， 反 馈 则 在 用 户 打字 
或 选择 完成 时 提供 。 这 个 技巧 让 我 们 能 够 在 基本 和 增强 体验 里 重复 使 用 同一 套 服务 器 端 验证 规则 。 


2.3.4 组 合 基本 和 增强 体验 


这 种 单 页 的 增强 体验 在 基本 体验 里 被 分 解 成 那么 多 步 , 看 起 来 似乎 很 难 在 两 种 体验 的 基础 标 
记 里 使 用 相同 的 代码 。 不 过 , 我 们 可 以 向 每 个 人 输出 基本 体验 里 的 第 一 步 ， 运 行 能 力 测试 ， 然 后 
借助 JavaScript ( 更 确切 地 说 是 Ajax ) 和 CSS 的 力量 将 5 个 基本 步 又 的 基础 标记 组 合成 单一 的 增强 
页 面 。 另外， 为 了 加 快 网 页 载 和 信 ， 服 务 器 还 可 以 检查 能 力 测试 所 设置 的 cookie， 看 看 这 个 浏览 
是 否 已 经 通过 了 测试 ， 然 后 再 为 增强 体验 的 用 户 组 合 整 个 页 面 。 

还 可 以 利用 已 创建 的 后 端 逻 辑 , 同时 为 基本 和 增强 体验 输出 合适 的 表单 并 执行 验证 规则 。 在 
这 种 情况 下 ， 服 务 器 逻辑 会 被 配置 为 只 读 取 请 求 数 据 ,， 增强 体验 则 会 采用 Ajax 生成 请 求 ， 而 基本 
体验 会 使 用 标准 的 网 页 请 求 。 


2.4 案例 3: 预算 计算 器 里 的 交互 数据 可 视 化 
我 们 的 下 一 个 研究 案例 可 能 是 视觉 性 最 为 丰富 的 一 个 例子 :一 款 用 于 规划 财务 预算 的 动态 预 


算计 算 工 具 。 它 使 用 一 组 交互 滑 块 进行 即时 数据 计算 , 并 以 显示 带 有 悬浮 提示 的 交互 性 饼 图 (pie 
chart ) 和 月 度 及 年 度 总 额 的 形式 提供 实时 反馈 ， 如 图 2-20 所 示 。 
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图 2-20 ”预算 计算 器 的 目标 增强 设计 


这 个 工具 第 一 眼看 上 去 可 能 不 会 立即 让 人 感觉 适合 使 用 渐进 增强 方法 。 但 是 通过 X 光 透视 可 
以 发 现 , 这 个 工具 的 核心 功能 非常 直观 , 并 且 适 合 使 用 通用 设计 方式 : 那些 高 级 滑 块 元 素 只 是 让 
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用 户 在 若干 类 别 里 输入 数值 ,而 一 览 表 和 饼 图 显示 了 这 些 数值 计算 后 的 总 和 , 并 按照 类 别 和 总 金 
额 显示 它们 的 相对 权重 。 


2.4.1 选择 预算 线 组 件 的 基本 标记 


这 款 预 算计 算 器 使 用 一 个 滑 块 组 件 来 设置 和 调整 每 个 预算 线 ”( budget line ) 项 目的 数值 。 对 
于 一 个 增强 滑 块 组 件 而 言 ， 可 选择 的 “最 佳 ”基础 代码 有 不 少 ， 哪 种 元 素 是 正确 的 选择 要 根据 现 
有 选项 的 数量 和 长 度 而 定 。 
> 对 于 有 2~5 个 简单 选项 ( 评分: 很 好 、 好 、 一 般 、 差 、 不 适用 ) 或 10 以 内 的 数值 等 级 来 说 ， 
单 选 按钮 组 是 一 个 不 错 的 选择 ， 因 为 它 能 显示 所 有 的 选项 以 方便 浏览 ， 而 且 还 内 置 限制 
性 ， 避 免 用 户 错误 输入 。 
上 如 果 连 续 体 范围 更 大 或 者 更 个 性 化 ， 致 使 滑 块 所 在 的 范围 有 5~20+ 个 固定 选项 〈 例 如 金融 
评级 里 的 级 别 : AAA、AA+、AA、AA-、A+、A、A-、BBB+、BBB 等 )， 下 拉 列 表 框 则 
是 最 佳 选择 , 因为 它 提供 了 良好 的 限制 性 , 数量 更 大 的 选项 列表 还 可 以 使 用 optgroup 元 素 
进行 视觉 分 组 。 至 于 缺点 ,下 拉 列 表 菜 单 的 选项 不 容易 浏览 ， 因 为 默认 情况 下 它们 被 隐 
藏 于 视野 之 外 ( 包含 在 一 个 下 拉 菜 单 里 )， 而 且 可 能 需要 滚动 查看 。 
> 当 用 户 可 以 输入 各 种 数值 时 ( 最 高 价格 $0~1000 )， 文 本 输入 框 就 很 合适 了 ， 但 是 要 注意 
它 没有 原生 方法 可 以 对 数值 输入 进行 限制 ， 因 此 这 种 方式 需要 在 服务 器 端 进行 验证 。 
我 们 会 为 每 一 个 预算 滑 块 使 用 一 个 简单 的 文本 input , 因为 希望 用 户 能 够 输入 各 种 美元 数值 ， 
包括 使 用 小 数 点 来 提高 精确 度 。 
这 个 预算 计算 器 的 基础 标记 以 一 个 form 标 签 开 头 ，action 属 性 指向 处 理 该 表单 的 某 个 资源 。 
每 个 预算 类 别 线 项 目 都 放 在 一 个 div 里 ， 其 中 包含 一 个 label ， 一 个 用 于 输入 美元 预算 值 的 关联 
文本 input， 以 及 一 个 显示 该 类 别 百 分 比 计 算 值 的 sgpan。 我 们 给 每 个 类 别 编写 的 标记 看 起 来 就 像 
这 样 : 
<div> 
<label for="category-1">rent/mortgage</label> 
<input type="number" min="0" max="5,000" value="1,500" id="category-1" /> 


<Span class="budget-percentage" title="Percent of total budget">48%</span> 
</div> 


这 个 输入 框 有 一 个 number 属 性 ， 还 有 额外 的 min 和 和 max 属性， 以 设置 它 能 接受 的 高 低 范围 。 一 
开始 它 的 实际 数值 和 百分比 计算 值 都 会 是 空白 ， 之 后 随 着 每 次 页 面 刷 新 而 生成 必要 的 值 。 















































注意 ”这 个 输入 框 的 number 类 型 是 HTML5 规 范 里 的 一 个 新 属性 ， 不 过 现在 可 以 安全 使 用 ， 因 为 
不 支持 它 的 浏览 器 会 默认 将 type 属 性 视 为 text。 第 3 章 会 更 详细 地 讨论 输入 框 属性 。 








Q@ 在 经 济 学 里 ,预算 线 是 指 给 定 商品 价格 和 收入 等 级 的 情况 下 ,一 名 消费 者 所 能 负担 的 任意 两 种 商品 组 合 所 构成 的 
一 条 线 。 一 一 译 者 注 
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在 基本 体验 里 ， 表 单 需 要 在 类 别 列表 底部 放置 一 个 “计算 预算 ”( Calculate Budget ) 按钮 来 
提交 表单 数据 ， 并 在 服务 器 上 计算 总 金额 及 类 别 的 百分比 ， 如 图 2-21 所 示 。 
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图 2-21 ”基本 版 计算 器 提供 了 简单 的 文本 输入 框 、 百 分 比 计算 值 和 总 金额 ， 
以 及 一 个 用 来 在 服务 器 端 更 新 数据 变动 的 按钮 


我 们 不 得 不 适应 一 种 错误 情况 :用 来 输入 预算 数额 的 文本 输入 框 并 不 能 原生 提供 很 好 的 限制 
来 防止 人 们 输入 字母 或 特殊 符号 。 基 于 这 个 原因 , 每 次 提交 表单 时 服务 器 都 需要 对 输入 进行 验证 。 

我 们 还 可 以 通过 在 基本 体验 里 提供 一 组 “空白 ”文本 输入 框 , 实现 添加 新 预算 类 别 这 个 功能 。 
就 像 用 “提交 ”( Submit ) 按钮 重新 计算 预算 那样 ,，“ 添 加 ”( Add ) 按钮 会 提交 整 张 表单 ,然后 使 
用 新 的 类 别 和 计算 值 重新 加 载 页 面 ， 如 图 2-22 所 示 。 




















Add a category 


Name 





Amount 














图 2-22 ”这 张 小 表 单 在 基本 体验 里 添加 一 个 新 类 别 并 重新 加 载 页 面 
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通过 使 用 这 两 种 简单 的 表单 来 收集 预算 信息 与 添加 新 的 类 别 ,我 们 就 能 够 支持 所 有 的 关键 功 
能 ， 提 供 令 人 满意 和 内 容 丰 富 的 基本 体验 。 











2.4.2 ”从 基础 标记 开始 创建 可 访问 的 滑 块 


虽然 基本 体验 里 的 简单 表单 字段 能 够 完成 任务 ， 但 是 对 那些 使 用 有 能 力 浏 览 器 的 用 户 来 说 ， 
增强 体验 里 具备 触摸 质感 的 滑 块 控件 能 鼓励 他 们 进行 更 多 探索 , 而 且 非 常 有 乐趣 , 如 图 2-23 所 示 。 


groceries 人 300 




















entertainment ps 375 
lelJalellaTle tol | 150 


图 2-23 ”用 颜色 编码 的 交互 滑 块 在 拖 动 时 会 更 新 美元 数字 反馈 和 人 饼 图 的 视觉 形象 








在 渐进 式 增强 和 X 光 透视 的 背景 下 ， 要 让 基本 和 增强 体验 协同 工作 需要 遵守 一 些 关键 原则 。 

首先 ,要 制作 一 个 收集 用 户 输入 或 数据 输入 的 增强 组 件 时 , 我们 都 会 使 用 一 种 “代理 ”模式 
来 制作 它 。 举 个 例子 ， 在 页 面 加 载 时 ， 用 来 创建 滑 块 的 增强 脚本 会 查找 对 应 的 基础 input 里 是 否 
已 经 存在 数值 ， 如 果 存 在 则 使 用 此 数值 来 设置 滑 块 操 纵 杆 的 初始 位 置 。 请 块 移 动 时 ， 脚 本 会 重新 
设置 input 的 值 了 予以 匹配 ， 而 且 这 个 脚本 会 不 断 地 保持 两 者 同步 。 在 许多 情况 下 ， 我 们 会 让 请 块 
和 可 编辑 的 input 同 时 出 现在 页 面 中 ， 让 用 户 自 己 选择 用 哪 一 个 。 这 种 方式 的 好 处 是 服务 器 能 
以 相同 方式 处 理 基本 和 增强 体验 里 的 数据 ， 因 为 它 只 和 ;input 交互 。 

其 次 ,因为 没有 HTML 元 素 能 够 原生 映射 出 滑 块 的 语义 ， 所 以 我 们 会 将 非 语义 的 标记 用 于 这 
个 增强 组 件 , 这 就 意味 着 我 们 需要 加 入 可 访问 性 功能 来 模拟 用 户 期 待 的 那些 原生 行为 。 在 这 种 情 
况 下 ， 我 们 会 在 代码 里 用 一 连 串 的 div 来 制作 滑 块 容 器 、 轨 道 和 操纵 杆 。 但 是 ， 使 用 辅助 设备 的 
用 户 不 会 知道 这 堆 div 是 一 个 交互 性 组 件 ， 除 非 我 们 加 入 可 访问 性 功能 将 它 “ 翻 译 ” 出 来 。 具 体 
地 说 ， 会 添加 一 个 值 为 slider 的 ARIA role 属 性 标明 这 是 一 个 滑 块 组 件 ， 还 要 用 其 他 一 些 属性 设 
置 滑 块 的 最 小 值 、 最 大 值 和 当前 值 ， 这 样 新 版 的 屏幕 阅读 器 就 能 解读 这 个 组 件 。 对 那些 使 用 不 支 
持 ARIA 功 能 的 旧式 屏幕 阅读 器 的 用 户 而 言 ， 能 够 与 原始 的 输入 框 进行 交互 则 成 了 必需 的 可 访问 
性 功能 。 

最 后 ,因为 滑 块 依靠 拖 动 行为 来 移动 操纵 杆 , 所 以 还 必须 要 考虑 许多 新 式 的 移动 设备 ( 比如 
iPhone 、Palm Pre 和 Google Android ) 用 拖 动 事 件 实现 一 般 的 屏幕 各 问 深 动 。 为 了 保证 滑 块 在 那些 
设备 上 仍然 可 用 , 滑 块 脚本 必须 能 让 用 户 通过 点 击 操 纵 杆 获取 焦点 , 然后 在 轨道 的 其 他 位 置 再 次 
点 击 来 设置 新 值 。 类 似 的 行为 还 支持 键盘 访问 : Tab 键 让 滑 块 操纵 杆 获 得 焦点 ， 方 向 键 移动 滑 块 
到 一 个 具体 值 。 


2.4.3 制作 饼 图 


能 够 看 到 饼 图 随 着 预算 滑 块 的 移动 即时 更 新 , 是 增强 体验 里 的 一 项 特色 功能 , 而 且 确实 增强 
了 交互 性 ,但 是 依靠 Adobe Flash 等 插件 或 蘑 个 服务 器 端的 工具 来 生成 一 张 静 态 饼 图 并 不 包括 在 我 
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们 为 之 奋斗 的 包容 性 渐进 增强 原则 之 内 。 幸 好 ， 我们 可 以 采取 一 种 更 加 通用 ( 而 且 向 前 兼容 ) 的 
方式 ， 即 使 用 HTML5 的 canvas 标 签 在 众多 现代 浏览 器 里 生成 原生 的 HTML 图 表 ， 如 图 2-24 所 示 。 




















( 甚至 连 Internet Explorer 都 可 以 不 借助 插件 泻 染 出 这 张 图 表 ， 只 需 使 用 一 个 谷歌 的 脚本 ， 名 为 Si 


ExplorerCanvas: http://excanvas.sourceforge.net )。 









rent/mortgage 





rent/mortgage 
$1,500 (50%) 
ES 


图 2-24 在 增强 体验 里 生成 饼 图 提示 使 用 的 值 和 基本 体验 里 使 用 的 值 相 
同 : 类 别 标签 、 数 值 和 百分比 


饼 图 中 的 值 直接 取 自 生成 每 个 输入 框 边 上 百分比 反馈 信息 的 JavaScript 代 码 ， 然 后 传 给 男 一 
个 脚本 以 生成 canvas 图 表 。( 第 12 章 将 详细 介绍 用 canvas 制 作 可 访问 图 表 。 ) 

用 户 将 他 们 的 鼠标 停 在 饼 图 某 个 部 分 的 上 方 时 , 饼 图 的 工具 提示 会 显示 这 部 分 的 标签 、 预 算 
美元 金额 和 百分比 。 这 些 数据 只 是 呈现 “增强 ”表格 ( 以 及 基础 标记 ) 中 标签 、 输 入 和 百分比 值 
的 另 一 种 方式 。 
























































注意 第 10 章 将 详细 讨论 如 何 创 建 可 访问 的 自 定义 提示 。 





从 可 访问 性 的 角度 看 , 一 张 饼 图 无 论 如 何 泻 染 都 无 法 为 盲人 用 户 提 供 有 用 的 信息 。 因 此 , 我 
们 会 在 增强 体验 里 为 屏幕 阅读 器用 户 添加 一 点 背景 信息 , 让 他 们 明白 canvas 标 签 及 任何 与 图 表 有 
关 的 标记 都 纯粹 是 展示 性 的 。 我 们 会 将 canvas 放 置 在 一 个 div 容 器 内 ， 并 添加 一 个 名 为 img 的 role 
来 表示 canvas 扮 演 着 一 张 图 片 的 角色 ， 另 外 还 会 在 aria-label 属 性 里 提供 操作 说 明 性 质 的 消息 文 
字 ， 解 释 这 张 图 表 的 用 途 和 它 的 数据 值 。 对 于 那些 使 用 不 支持 ARIA 的 旧式 屏幕 阅读 需 的 用 户 ， 
我 们 会 在 一 个 span 标 签 里 提供 第 二 则 消息 ( 此 标签 会 对 非 盲 人 用 户 和 支持 ARIA 的 屏幕 阅读 带 隐 
藏 )， 解释 这 张 图 表 的 标记 纯粹 是 展示 性 的 ， 并 附 上 一 个 “ 跳 过 ”链接 ， 这 样 他 们 就 可 以 轻松 越 
过 那个 标记 。 

在 基本 体验 里 , 百分比 反馈 所 表现 的 信息 和 文字 版 的 饼 图 没有 区 别 , 所 以 你 可 能 完全 不 需要 
将 饼 图 包括 进来 。 不 过 ， 如 有 果 对 图 表 有 和 需求， 可 以 在 每 次 重 算 预算 时 生成 一 张 静 仿 的 饼 图 图 片 ， 
然后 用 一 个 image 标 签 添加 到 页 面 中 。 
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现在 就 有 了 一 个 完全 可 用 且 可 访问 的 预算 规划 工具 , 可 以 在 任何 设备 上 工作 。 我 们 的 工具 箱 
里 则 多 了 一 些 有 趣 的 X 光 技巧 ， 可 以 在 其 他 环境 里 再 次 使 用 。 
2.5 案例 4: 支持 功能 完备 浏览 器 应 用 程序 的 各 种 功能 
一 一 照片 管理 器 


我 们 最 后 的 案例 是 一 个 照片 管理 器 界面 。 作 为 Web 2.0 时 代 的 一 个 新 近 产 物 ， 它 所 具备 的 复 
杂 应 用 程序 功能 之 前 只 有 在 桌面 端 才能 见 到 ， 现 在 则 复制 到 了 Web 浏 览 器 中 ， 如 图 2-25 所 示 。 
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图 2-25 ”基于 Web 的 照片 管理 右 应 用 程序 


就 像 这 个 例子 所 展示 的 ,今天 的 许多 程序 和 在 线 工 具 都 包含 了 类 似 的 Ajax 驱动 型 复杂 应 用 程 
序 功能 ， 包 括 用 于 导航 和 显示 内 容 的 可 伸缩 /缩放 面板 ， 简 单 的 单个 物体 拖 放手 势 ， 通 过 鼠标 拖 
动 选 择 或 者 Control/Shift 键 进行 复杂 多 重 选择 的 能 力 ， 以 及 用 Ajax 实现 的 即时 编辑 操作 。 

这 个 设计 体现 出 了 如 此 多 样 的 交互 性 , 你 几乎 都 难以 想象 如 何 能 在 基本 体验 里 支持 所 有 这 些 
功能 ! 事实 上 ， 在 用 X 光 透视 如 此 复杂 的 界面 时 ,很 大 一 部 分 工作 是 仔细 审视 其 中 的 功能 并 确定 
该 如 何 处 理 它 : 选择 功能 也 许 有 一 个 简单 的 等 价 元 素 ; 复杂 一 些 的 交互 和 手势 可 以 被 组 织 成 多 步 
又 或 者 分 阶段 的 工作 流 ; 另外 , 在 一 些 情况 下 , 我 们 还 可 能 会 认定 某 些 类 型 的 高 级 功能 过 于 复杂 ， 
无 法 保证 所 有 用 户 和 设备 都 能 看 到 这 些 功 能 的 等 价 基本 HTML。 

就 像 处 理 其 他 目标 设计 一 样 , 我 们 首先 会 站 在 高 处 观察 这 个 照片 管理 器 , 理解 内 容 和 功能 的 
分 组 情况 , 寻找 是 否 存 在 复杂 的 数据 提交 先后 顺序 ,确定 对 所 有 用 户 来 说 哪些 内 容 和 组 件 是 实现 
网 站 功能 所 必需 的 ， 然 后 将 它们 映射 到 等 价 的 基本 HTML 以 提供 支持 。 
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2.5.1 制作 全 局 导航 元 素 的 标记 


我 们 会 从 整体 的 页 面 布局 着 手 ， 因 为 对 它 进行 X 光 分 析 足 够 容易 : 顶部 包含 产品 名 称 和 主导 2 
航 版 块 (“组 织 ”Organize,“ 上 传 ”Upload,“ 购 买 ”Shop,“ 账 户 ”Account ) 的 长 条 可 以 被 编码 
为 一 组 标准 链接 。 在 基本 和 增强 体验 里 ,每 个 链接 都 会 重新 载 人 整个 应 用 程序 窗口 ， 因 为 该 应 用 
程序 的 相应 版 块 会 包含 不 同 的 功能 。 我 们 会 在 基础 标记 里 将 一 个 标题 元 素 (hl ) 用 于 产品 名 称 
“Filament 照 片 管理 器 ”( Filament Photo Manager ), 然后 在 增强 体验 里 给 它 添加 样式 , 使 它 看 上 去 
更 精美 ， 如 图 2-26 所 示 。 























Filament Photo Manager 


Skip navigation 


e Organize 
® Upload 
® Shop 

® Account 


























图 2-26 ”在 基本 体验 里 看 到 的 标题 和 全 局 导航 


至 于 随 版 块 而 定 的 二 级 导航 ， 左 侧 的 导航 面板 也 应 该 在 基础 标记 里 被 编码 成 一 组 标准 链接 ， 
用 标题 来 区 分 和 归 组 两 种 类 型 的 内 容 ( 照片 和 专辑 )， 如 图 2-27 所 示 。 
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® All photos 
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New album ， 














图 2-27” 左 侧 的 导航 面板 被 编码 成 一 系列 标题 和 链接 列表 

在 增强 体验 里 , 用 户 点 击 左 侧 导 航 面 板 里 的 某 个 链接 时 , 我 们 想 以 一 种 类 似 应 用 程序 的 无 颖 
交互 手段 在 右 侧 面板 里 生成 相应 的 照片 。 我 们 会 用 JavaScript 来 截获 链接 的 href 值 , 然后 构建 一 个 
Ajax 请 求 ， 从 所 选 专辑 里 取 回 照片 放 人 右手 边 的 面板 里 ， 如 图 2-28 所 示 。 
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国 Hawaiitrip 











网 New album 


图 2-28 在 增强 体验 里 ， 点 击 左 侧 面板 里 的 某 个 专辑 名 后 ，Ajax 会 在 右 
侧面 板 里 载 人 网 格式 的 专辑 照片 


在 左 侧 导航 面板 的 底部 还 有 一 个 “新 专辑 ”(New Album ) 按钮 。 在 增强 体验 里 ， 点 击 这 
个 按钮 会 在 左 侧面 板 里 动态 创建 一 个 新 的 专辑 链接 ， 名 字 是 默认 的 ， 可 以 进行 编辑 ; 在 基本 
体验 里 , 这 个 按钮 将 用 户 导航 至 男 一 张 页 面 , 里 面 有 一 张 用 于 命名 专辑 的 简单 表单 ， 如 图 2-29 
所 示 。 
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图 2-29 ”增强 版 的 “新 专辑 ”按钮 在 左 侧 导 航 面 板 里 创建 出 一 个 可 编辑 的 节点 ; 
在 基本 体验 里 ， 这 个 按钮 导航 至 男 一 张 表单 页 来 命名 专辑 




















2.5.2 ”支持 专辑 和 多 张 照片 的 复杂 交互 

在 增强 体验 里 , 每 张 专辑 都 显示 为 一 个 干净 、 简 单 的 界面 ,顶部 是 专辑 名 ,次 级 操作 则 被 放 
入 右上 角 的 菜单 里 。 底部 的 工具 栏 里 有 一 组 操作 选中 照片 的 按钮 ， 以 及 一 个 用 来 改变 缩 略 图 大 小 
的 滑 块 ， 如 图 2-30 所 示 。 
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Email 
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Winter party Delete 
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轩 New album Delete “Email Print 


图 2-30 “增强 体验 里 的 专辑 信息 版 块 在 屏幕 顶部 提供 了 “专辑 操作 ” ( Album 
Actions ) 菜单 ， 底 部 是 一 个 操作 选中 照片 的 工具 栏 (“删除 ”Delete、 
“发 送 邮 件 ”Email、“ 打 印 ”Print ) 


有 一 个 功能 让 增强 版 的 照片 管理 器 真正 感觉 像 是 桌面 应 用 程序 : 在 专辑 网 格 视图 中 , 你 可 以 
通过 在 一 组 照片 周 玮 拖 动 套 索 (lasso )， 或 者 按 住 Control 或 Shift 键 并 点 击 一 组 照片 来 选择 多 张 照 
片 。 选 择 完 成 后 ， 这 个 界面 允许 用 户 点 击 底部 的 操作 工具 栏 来 编辑 、 删 除 、 通 过 邮件 发 送 或 者 打 
印 所 选 照片 ,还 可 以 将 照片 拖 放 至 左 侧面 板 里 的 某 个 专辑 名 上 ， 把 它们 添加 到 该 专辑 ， 如 图 2-31 
所 示 。 
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图 2-31 可 以 选择 多 张 照片 ， 通 过 拖 放 将 它们 添加 到 某 个 专辑 中 ， 就 像 
一 个 桌面 应 用 程序 那样 
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这 些 富 交互 手段 乍 一 看 可 能 与 渐进 增强 的 方式 不 相 容 ,但 是 事实 上 你 可 以 很 容易 地 使 用 标准 
HTML 表 单元 素来 提供 同样 的 功能 。 

基本 体验 里 的 专辑 视图 看 上 去 样式 要 少 很 多 , 却 同样 提供 了 所 有 的 功能 。 专辑 页 以 一 个 标题 
开头 ， 接 下 来 是 一 排 专辑 操作 按钮 ， 用 来 将 用 户 送 至 其 他 多 个 页 面 以 完成 或 确认 这 些 操作 ， 如 图 
2-32 所 示 。 
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(Rename) (Duplicate ) (Email) (Order prints) (Delete 

















图 2-32 ”导航 进入 基本 体验 里 的 专辑 信息 页 后 ， 源 代码 顺序 中 首先 显示 
的 是 专辑 名 称 和 “专辑 操作 ”标题 

在 考虑 鼠标 拖 动 和 Control 键 点 击 这 些 复杂 的 交互 方式 时 , X 光 透视 显示 出 它们 的 作用 仅仅 是 
让 用 户 选 择 多 张 照 片 ,我 们 可 以 很 容易 地 用 原生 表单 元 素 在 基本 体验 里 复制 这 个 。 在 基础 标记 里 ， 
每 张 照片 的 代码 都 可 以 附 上 一 个 包含 图 片 名 称 的 label， 以 及 一 个 用 于 选择 这 张 照片 的 checkbox。 
专辑 的 标记 放置 在 一 个 form 标 签 的 内 部 , 用 多 个 submit 按 钮 执行 删除 、 通 过 邮件 发 送 和 打印 操作 ， 
另外 还 有 一 个 下 拉 菜 单 与 “添加 ”( Add ) 按钮 的 组 合 ， 用 来 将 选中 的 照片 指定 给 某 个 专辑 ， 如 
图 2-33 所 示 。 
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图 2-33 在 基本 体验 里 ， 复 选 框 方便 用 户 选 择 多 张 照 片 ， 以 及 用 一 排 按 
钮 对 该 照片 组 执行 操作 
这 种 有 着 表单 样式 的 交互 手段 在 基本 体验 里 是 完美 可 用 的 , 甚至 还 可 能 会 得 到 那些 不 太 习 惯 
使 用 拖 放 手势 的 用 户 们 的 偏爱 ,更 不 用 说 屏幕 阅读 需 用 户 ,或 者 因为 手机 是 多 点 触摸 界面 而 根本 
无 法 执行 拖 动 操作 的 用 户 了 。( 我 们 总 是 喜欢 在 能 力 测试 里 提供 一 个 备用 链接 ， 让 用 户 从 增强 体 
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验 回 到 基本 体验 。 这 个 经 典 的 例子 说 明了 即使 用 户 使 用 的 是 有 能 力 的 浏览 器 , 他 们 也 可 能 想 要 简 
化 体验 ， 提 供 一 个 链接 能 让 他 们 选择 最 符合 自身 需求 的 版 本 。) 

用 户 在 增强 体验 的 专辑 视图 里 双击 一 张 缩 略 图 后 ,专辑 缩 略 视 图 会 切换 成 全 尺寸 的 照片 细节 
， 如 图 2-34 所 示 。 
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图 2-34 ”在 增强 体验 里 双击 一 张 照 片 的 缩 略 图 后 ，Ajax 会 在 右 侧 
面板 里 载 入 一 张 全 尺寸 的 照片 


专辑 网 格 和 照片 细节 视图 之 间 的 这 种 平滑 渐变 只 有 通过 JavaScript 才 能 实现 。 为 了 让 基本 体 
验 里 的 用 户 能 够 访问 照片 细节 以 及 相关 的 编辑 工具 ， 我 们 会 在 每 一 张 缩 略 照 片上 放置 一 个 链接 ， 
它 会 打开 一 张 单独 的 HTML 照 片 细节 页 。 和 上 面 的 专辑 一 样 ， 我 们 会 用 Ajax 取 回 和 照片 细节 页 的 
基础 HTML 标 记 完 全 一 样 的 代码 ， 填 入 增强 版 的 面板 中 ， 加 以 适当 的 样式 处 理 ， 所 以 说 两 种 体验 
里 的 标记 没有 区 别 ， 如 图 2-35 所 示 。 
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图 2-35 ”增强 体验 里 的 照片 细节 视图 
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增强 体验 中 的 照片 细节 页 里 有 照片 的 名 称 , 一 个 “返回 专辑 ”( Back To Album ) 按钮 ， 沿 着 
这 个 按钮 下 去 有 一 个 操作 工具 栏 , 可 以 方便 地 旋转 、 裁 切 、 删 除 、 通 过 邮件 发 送 和 打印 这 张 照 片 。 
在 基础 标记 里 我 们 会 创建 一 些 标准 表单 提交 按钮 ,让 用 户 能 够 对 照片 执行 这 些 操作 ,而 同样 的 按 
钮 在 增强 体验 里 仅仅 是 加 了 样式 以 及 位 置 不 同 。 增 加 快捷 键 〈 比如 将 删除 键 映射 到 删除 照片 上 ) 
和 鼠标 手势 ( 比如 支持 用 拖 放 将 照片 添加 到 左 侧 导航 列表 的 专辑 中 ) 会 提升 交互 的 丰富 性 , 模拟 
出 原生 桌面 应 用 程序 才 有 的 行为 ， 如 图 2-36 所 示 。 
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图 2-36 ”在 基本 体验 里 ， 点 击 某 张 带 链接 的 照片 会 将 用 














"导航 到 











一 张 单独 的 照片 细节 页 ， 内 含 优化 过 的 工具 和 导航 项 
在 基本 体验 里 , 我 们 会 在 照片 下 方 添 加 儿 个 独特 的 功能 来 增强 可 用 性 。 首先, 提供 照片 所 在 


“添加 到 专辑 ”功能 ， 


息 ， 并 在 每 张 专辑 的 旁边 加 上 一 个 “ 移 除 ”( Remove ) 按钮 。 此 处 还 提供 了 与 
以 便 将 照片 加 入 到 其 他 的 专辑 中 。 这 里 的 每 种 操作 都 会 





提交 一 张 表 单 并 重新 加 载 页 面 以 提供 准确 的 反馈 信息 。 








屏幕 最 下 方 的 导航 链接 可 以 用 于 浏览 专辑 里 的 后 一 张 或 者 前 一 张 照片 , 以 及 返回 专辑 网 格 视 
图 。 将 基本 体验 分 解 成 多 张 页 面 时 ( 就 像 现 在 这 样 )， 提 供 额 外 的 导航 选项 来 改进 用 户 的 整体 流 


程 总 是 没 错 的 。 
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“ 裁 切 ”(Crop ) 按钮 到 哪 去 了 

你 可 能 会 注意 到 我 们 在 基本 体验 里 省 略 了 “ 裁 切 ”按钮 。 这 是 有 意 而 为 的 。 有 时 在 X 光 透 
视 时 你 会 碰 到 一 些 功能 ， 这 些 功能 用 标准 HTML 表 达 时 过 于 复杂 ， 难 以 用 于 基本 体验 。 对 我 们 
来 说 ， 裁 切 工 具 就 是 这 样 一 个 合子 : 我 们 如 何 才能 在 基本 体验 里 重 现 出 裁 切 框 的 拖 动 缩放 
( drag-and-resize ) 功能 ? ”0 需 的 ,可 以 探索 一 些 访问 解决 方案 : 比如 ， 
用 服务 器 计算 图 像 的 总 像素 尺寸 , 或 者 向 用 户 提 供 一 组 文本 输入 框 , 让 他 们 输入 图 像 左 上 角 和 
右 下 角 的 像素 坐标 ,。 但 是 相 比 简单 地 建议 用 户 在 基本 体验 里 先 适 当 裁 切 图 像 再 上 传 ,上面 无 论 
哪 一 种 选择 的 用 户 体验 似乎 都 要 糟糕 得 多 。 

我 们 相信 在 任何 网 站 或 应 用 程序 的 基本 和 增强 版 本 之 间 ， 努 力 实 现 尽 可 能 多 的 平等 是 最 
好 的 方式 ， 但 是 也 承认 当 可 用 性 或 开发 努力 毫 无 意义 时 ， 某 些 功能 需要 从 基本 体验 里 下 掉 。 





2.5.3 ”创建 自 定义 表单 和 又 加 


除了 专辑 之 间 及 专辑 网 格 与 细节 视图 之 间 的 导航 外 ,添加 一 些小 的 车 加 ( overlay ) 和 对 话 框 
在 许多 情形 下 会 让 增强 体验 真正 显得 具有 响应 性 , 像 个 应 用 程序 。 比如, 点 击 操作 工具 栏 里 的 “发 
送 邮 件 ” 按 钮 可 以 在 照片 上 方 滑动 显示 出 半 透 明 的 钱 加 层 , 提示 用 户 输入 收 件 人 和 邮件 内 容 , 再 
用 Ajax 发 送出 去 ， 如 图 2-37 所 示 。 
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图 2-37 在 增强 体验 里 ，“ 邮 和 寄 照 片 ”( Email Photo ) 表单 显示 在 一 个 至 加 层 中 ， 
由 Ajax 附加 到 页 面 上 


要 在 基本 体验 里 实现 这 个 功能 , “发送 邮件 ”按钮 应 将 用 户 导航 到 包含 邮件 表单 的 一 张 单独 
页 面 里 。( 基本 和 增强 体验 可 以 使 用 相同 的 表单 基础 标记 ， 在 增强 体验 里 先 由 Ajax 获取 ， 然 后 修 


38 第 2 章 渐进 增强 实践 : X 光 透视 





改 样式 ， 使 其 看 起 来 像 过 加 设计 。) 在 邮件 成 功 发 送 之 后 ， 网 页 应 该 刷新 ， 并 显示 出 一 条 确认 消 
息 和 一 个 返回 照片 细 闻 页 的 按钮 或 链接 ， 如 网 2-38 所 示 。 











Email photo 


yellow flower.jpg 
file size: 1.2mb 


Send to: 


Message: 














图 2-38 ”在 基本 体验 里 ，“ 邮 寄 上 照片” 表单 是 一 张 单独 的 HTML 网 页 


这 个 为 核心 屏幕 类 型 和 功能 操作 提供 导航 和 功能 操作 支持 的 方案 遵循 一 组 通用 模式 :在 基本 
体验 里 将 工作 流 分 为 多 屏 ， 在 增强 体验 里 则 重复 利用 基础 代码 ， 并 辅 以 到 加 和 原 地 处 理 功能 


(in-place feature )。 


















































2.5.4 创建 返回 按钮 支持 


我 们 觉得 , 在 创建 复杂 的 网 站 或 网 络 应 用 程序 ,特别 是 用 到 Ajax 时 ,还 有 最 后 一 个 关键 要 点 
值得 仔细 考虑 : 浏览 器 的 返回 按钮 将 会 如 何 工作 。 

虽然 网 络 用 户 对 浏览 器 里 类 似 应 用 程序 的 复杂 交互 方式 正 变 得 越 来 越 习 以 为 常 ,但 是 他 们 仍 
然 期 待 某 些 浏览 器 的 原生 传统 能 继续 保持 ,包括 用 浏览 器 的 返回 按钮 能 导航 至 前 一 页 这 个 概念 。 
当 一 款 应 用 程序 使 用 Ajax 时 ,返回 按钮 在 默认 情况 下 不 能 识别 Ajax 生 成 的 临时 步骤 ,反而 会 将 用 
户 导 航 回 它 最 后 加 载 的 真正 “网 页 ”中 (很 多 时 候 那 会 是 登录 页 面 )， 这 可 能 会 让 用 户 十 分 困扰 
和 恼火 。 即 使 是 在 那些 没有 使 用 Ajax 编 程 的 网 站 或 应 用 程序 里 , 用 户 有 时 也 可 能 会 将 页 面 中 一 些 
大 块 的 可 切换 内 容 面板 看 做 一 个 新 “页 面 "*， 他 们 会 点 击 返 回 按 钮 ， 期 望 能 “返回 ”到 那里 。 

在 照片 应 用 程序 案例 中 ,我 们 预计 人 们 很 可 能 期 望 返回 按钮 能 将 他 们 带 回 到 之 前 的 导航 视图 
中 (专辑 1 一 照片 细节 A 一 照片 细节 B 一 专辑 5 ), 但 不 会 撤销 他 们 在 这 个 过 程 中 执行 的 任何 操作 ( 添 
加 到 专辑 、 发 送 邮 件 等 )。 简 单 地 说 ， 通 过 添加 一 个 独一无二 的 URL# 号 串 (URLhash，URL 中 以 
# 开 头 的 一 串 字符 ) 并 使 用 JavaScript 在 每 次 用 户 导 航 到 某 个 独一无二 的 专辑 或 照片 视图 时 进行 检 
查 , 返回 按钮 就 能 像 预期 的 那样 工作 ,而 且 所 有 的 常规 浏览 器 操作 (比如 收藏 和 用 邮件 发 送 某 个 
链接 ) 同样 也 能 像 预期 的 那样 工作 。 
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每 个 网 站 都 不 同 , 因此 具体 该 如 何 让 返回 按钮 的 行为 可 预测 且 有 用 , 要 根据 相应 的 系统 模型 
而 定 ， 但 它 在 让 应 用 程序 良好 工作 方面 扮演 着 重要 的 角色 ， 需 要 得 到 重视 。 第 9 章 介 绍 如 何 制 作 
标签 页 组 件 时 ， 将 讨论 了 用 这 种 方式 进行 状态 追踪 的 具体 技巧 。 


2.6 ”在 实践 中 运用 X 光 的 核对 清单 





当 我 们 将 功能 映射 成 标准 HTML, 创建 完 基础 标记 ,添加 上 增强 信息 ,并 反复 多 次 进行 测试 
和 完善 之 后 ，X 光 方法 的 最 终 步 又 是 过 一 遍 下 面 这 份 问题 核对 清单 以 检验 进展 。 








p> 基本 体验 是 否 只 靠 HTML 就 可 用 而 且 功 能 完整 ? 


> 基础 标记 是 否 编码 了 增强 体验 所 需 的 一 切 信息 ， 包 括 布局 和 结构 ? 














> 在 基本 和 增强 体验 里 ， 页 面 的 阅读 和 工作 顺序 是 否 合理 ， 是 否 突出 了 最 重要 的 内 容 和 


功能 ? 




















> 如 果 只 使 用 键盘 命令 是 否 可 以 在 页 面 中 导航 ? 表单 元 素 是 否 可 用 ( 可 以 执行 选择 和 提交 


操作 ) ? 





> 网 页 在 使 用 屏幕 阅读 器 访问 时 是 否 能 看 明白 ”用户 能 

















不 能 单独 在 页 头 结构 里 导航 ? 


> 无 论 是 因为 个 人 偏好 还 是 增强 版 本 由 于 某 种 未 曾 预料 到 的 原因 出 现 了 故障 ， 是 否 有 一 种 
明确 的 方式 能 让 所 有 用 户 〈 包 括 使 用 移动 设备 和 屏幕 阅读 器 的 那些 用 户 ) 在 基本 和 增强 
体验 中 相互 切换 ( 比如 一 个 “浏览 低 / 高 带宽 版 本 ”的 链接 ) ? 

虽然 这 些 问题 可 能 无 法 揭示 出 为 每 一 种 浏览 器 体验 提供 可 访问 性 和 渔 染 支 持 时 会 出 现 的 所 

有 异常 情况 ， 但 它们 突出 了 许多 关键 要 素 ， 会 帮助 我 们 实现 普遍 访问 这 一 目标 。 











我 们 只 介绍 了 在 所 有 可 能 的 网 站 和 网 络 应 用 程序 设计 中 





能 遇 上 的 全 部 情况 的 冰山 一 角 。 但 我 


们 和 希望 这 一 概述 能 够 让 读者 了 解 到 ， 有 多 少 增强 交互 方式 能 被 转化 成 简单 的 HTIML ,用 于 基本 体 
验 。 更 重要 的 是 , 希望 它 能 在 你 思考 如 何 用 渐进 增强 方法 处 理 复杂 的 应 用 程序 时 ， 带 给 你 灵感 。 
渐进 增强 〈 总 体 而 言 ) 和 我 们 的 X 光 方法 及 能 力 测试 ( 具体 而 言 )， 只 有 在 你 严格 采用 最 佳 






































编程 实践 方式 编写 HTML 标 记 、CSS 和 JavaScript 时 才能 有 效 工 作 。 接 下 来 的 三 章 会 介绍 一 些 关 键 





的 要 点 和 功能 ， 我 们 相信 理解 它们 对 于 正确 实施 渐进 增强 设计 至 关 重 要 。 
在 此 基础 上 ,我 们 会 接着 介绍 能 力 测试 框架 工作 原理 的 具体 情况 ,以 及 如 何 完善 甚至 扩展 它 ， 





从 而 以 更 有 创意 的 方式 满足 你 自己 的 特殊 需要 。 


之 后 , 深入 一 些 组 件 的 内 部 细节 来 演示 真正 的 实战 技巧 ， 


方法 适用 于 今天 的 浏览 器 ， 还 能 用 于 将 来 的 。 


借助 这 些 技巧 不 仅 可 以 让 渐进 增强 





编 与 有 意义 的 标记 








现 如 今 , 很 多 诱惑 会 让 你 忽视 编写 恰当 的 标记 和 结构 : 网 页 技术 军火 库 里 的 许多 武器 能 彻底 
改进 HTML, 有 经 验 的 设计 师 和 开发 者 能 在 一 堆 div 和 span 上 应 用 CSS 和 JavaScript 来 实现 层级 , 美 
化 元 素 或 者 通过 脚本 使 这 些 元 素 按照 他 们 的 意愿 工作 。 但是, 拿 掉 CSS 和 JavaScript 会 发 生 什么 ? 
内 容 层级 是 和 否 依然 存在 ? 最 重要 的 信息 是 否 出 现在 页 面 的 开头 部 分 ”导航 在 哪里 ? 寻找 起 来 方 
便 吗 ? 所 有 功能 是 否 仍然 能 正常 工作 ? 

本 书 建议 将 渐进 增强 和 能 力 测试 整合 进 开发 过 程 , 以 此 确保 一 切 内 容 和 功能 都 可 以 覆盖 到 所 
有 使 用 可 上 网 设备 的 人 。 但 是 ,要 运用 这 种 方法 ， 网 站 必须 建立 在 一 个 恰当 的 基础 之 上 , 那 就 是 
干净 、 组 织 良好 而 且 架 构 合 理 的 语义 标记 。 

什么 是 语义 标记 ?在 2001 年 《科学 美国 人 》 的 一 篇 文章 “The Semantic Web”( 语义 万 维 网 ) 
中 , Tim Berners-Lee 将 其 定义 成 一 种 “给 网 页 中 有 意义 内 容 创 建 结 构 ” 的 方式 (Tim Berners-Lee、 
James Hendler 和 Ora Lassila , “The Semantic Web”, 《科学 美国 人 》 杂 志 ，2001 年 5 月 ， 
http://t.cn/apHkZC )。 换 句 话说 , 语义 标记 就 像 是 词汇 表 、 语 法 、 发 音 和 行文 方式 , 帮助 浏览 器 ( 以 
及 延伸 到 的 用 户 ) 理解 网 页 内 容 。 我 们 发 现 ， 通 过 将 语义 化 HTML 标签 以 聪明 的 方式 (这些 方式 
甚至 能 让 缺少 CSS 和 JavaScript 的 基本 体验 都 一 目 了 然 并 且 可 用 ) 组 合 在 一 起 , 我 们 就 能 够 表达 出 
惊人 复杂 和 强 有 力 的 想法 。 

编写 可 以 在 所 有 浏览 器 上 工作 并 且 能 正确 支持 增强 的 基础 标记 , 需要 仔细 考虑 该 使 用 哪些 元 
素 ,， 以 及 将 它们 用 在 何 处 才 最 有 效 。 标 记 就 像 任何 一 种 语言 一 样 ， 如 果 没 有 扎实 的 语言 结构 和 规 
则 知识 ， 它 就 只 是 一 堆 声 音 和 符号 的 集合 而 已 。 

这 一 章 会 分 析 最 常用 的 HTML 元 素 , 并 描述 明智 的 语义 选择 能 够 怎样 改善 浏览 器 的 解读 ,并 
优化 任何 可 上 网 设备 上 的 用 户 体验 。 我 们 会 分 4 个 部 分 考虑 语义 标记 中 的 选择 。 

> 标记 文本 和 图 像 : 它们 是 任何 网 站 的 基石 ， 只 有 尽 可 能 地 标记 准确 才能 发 挥 最 佳作 用 。 

这 个 部 分 探索 了 一 系列 语义 标签 ， 从 而 智能 分 辨 网 页 内 容 及 赋予 层级 意义 。 

> 标记 交互 元 素 : 表单 和 其 他 交互 元 素 包 含 了 非常 特殊 的 功能 ， 选 择 正确 的 标记 对 于 支持 

预期 行为 和 促进 最 佳 用 户 交 互 而 言 至 关 重 要 。 

> 在 网 页 中 创建 上 下 文 关系 : 归 组 内 容 项 目 和 相关 表单 对 象 的 方式 是 一 个 良机 ， 能 让 你 帮 
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助 浏览 器 ( 和 受众 ) 理解 你 传达 的 讯息 和 目的 。 
> 建立 一 份 HTML 文 档 : 最 后 ， 使 用 标记 来 定义 HTML 文 档 和 标明 网 页 自身 也 是 一 套 方法 ， 
可 以 对 内 容 的 意义 进行 编码 ， 并 将 解读 方法 告知 浏览 器 或 其 他 用 户 代 理 。 
随 着 内 容 的 深入 , 我 们 会 介绍 如 何 解读 当代 设计 难题 并 将 它们 分 解 成 独立 的 部 分 , 这 样 就 可 
以 建立 最 佳 的 内 容 框架 和 标记 ， 然 后 在 这 个 基础 屋 上 添加 CSS 和 JavaScript 增 强 信息 。 


3.1 标记 文本 和 图 像 


作为 设计 师 , 我 们 知道 每 一 种 美好 的 体验 都 始 于 清晰 、 定 义 良 好 的 内 容 。 当 你 完成 了 网 站 描 
述 或 者 应 用 程序 的 工作 流 之 后 ， 把 内 容 翻 译 成 标记 只 不 过 是 搞 清 楚 要 用 哪些 元 素 而 已 。 

一 些 元 素 ( 比如 标题 ) 有 双重 用 途 : 各 种 浏览 器 泻 染 它们 的 方式 相当 一 致 ， 使 得 它们 在 视觉 
上 与 其 他 内 容 区 别 明 显 ， 在 底层 它们 则 向 辅助 技术 〈 比如 屏幕 阅读 器 ) 和 机 顺 〈 比如 搜索 引擎 ) 
提供 操作 指南 ， 使 其 无 需 借助 设计 里 的 任何 视觉 线索 就 能 解读 内 容 。 

接 下 来 的 部 分 介绍 了 我 们 推荐 的 那些 语义 元 素 , 通过 它们 能 将 有 用 的 意义 赋予 基础 文本 、 图 
像 和 富 媒体 。 


3.1.1 用 于 标记 有 意义 文本 的 元 素 


用 来 呈现 印刷 文字 的 惯例 (包括 段落 、 标 题 和 引用 文字 , 还 有 很 多 ) 已 经 存在 好 几 个 世纪 了 ， 
它们 能 帮助 读者 解析 和 理解 某 个 文本 的 层级 和 意义 。 这 些 规 则 在 网 络 上 与 在 古 腾 堡 发 明 印 刷 媒 介 
时 同样 成 立 , 语义 标记 则 提供 了 一 系列 丰富 准确 的 标签 来 帮助 将 意义 赋予 文本 网 页 内 容 。 详 尽 准 
确 地 运用 这 些 元 素 ， 能 够 显著 改善 浏览 吕 或 搜索 引擎 解读 并 呈现 文本 内 容 的 方式 。 

1. 标题 
标题 元 素 的 作用 是 标记 标题 和 子 标题 ， 将 内 容 分 割 成 多 个 部 分 并 在 页 面 中 创建 层级 。 
标准 的 语义 标题 元 素 从 h1 开 始 , 它 代 表 了 页 面 里 的 最 高 层级 。 后 续 每 一 级 标题 的 重要 程度 依 
此 递减 ， 直 至 h6， 它 是 最 小 的 可 用 标题 。 

<h1> 最 重要 的 标题 </h1> 

<h2> 次 重要 的 标题 </h2> 

<h3> 次 级 标题 </h3> 

<h4> 次 级 标题 </h4> 


<h5> 次 级 标题 </h5> 
<h6> 最 小 的 次 级 标题 </h6> 


对 搜索 引 敬 和 屏幕 阅读 器 而 言 ， 标 题 还 在 网 页 意义 和 可 访问 性 方面 扮演 了 一 个 重要 角色 。 

虽然 搜索 引擎 不 公开 它们 的 算法 ,但 是 许多 人 相信 一 些 搜索 引擎 基于 内 容 层 级 里 的 标题 来 解 
读 内 容 的 相对 重要 性 , 也 就 是 说 相对 于 标准 的 连续 文字 , 标题 元 素 中 的 文字 会 被 赋予 相对 更 高 的 
排名 权重 。 相 比 之 下 ， 一 个 段落 、div 或 者 span 即 使 将 样式 修改 得 看 起 来 像 个 标题 ， 也 不 会 被 赋 
了 予 同样 级 别 的 重要 性 。 

视力 残障 人 十 使 用 像 JAWS、NVDA、 苹果 VoiceOver 和 WindowEyes 等 屏幕 阅读 器 来 访问 网 页 
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内 容 和 功能 。 举 个 例子 ,许多 屏幕 阅读 器 利用 标题 元 素 快速 浏览 内 容 和 导航 。 它 们 让 用 户 能 够 简 
单 地 通过 击 键 来 遍历 某 张 网 页 中 的 标题 元 素 , 其 中 一 些 还 提供 了 列 出 这 些 标 题 的 专用 面板 , 用 来 
进行 快速 目录 导航 (www.w3.org/TR/WCAG-TECHS/H69.html )。 

另外 , 因为 标题 能 帮助 进行 页 面 导航 和 视觉 性 内 容 解析 , 所 以 良好 的 做 法 是 用 逻辑 一 致 和 不 
路 级 的 方式 使 用 它们 。 比 如 , 在 hi 的 后 面 使 用 hz ， 而 不 是 h3。 虽 然 省 略 了 标题 层级 的 标记 也 能 通 
过 验证 ， 但 它 可 能 会 给 那些 试图 理解 内 容 组 织 方式 的 用 户 带 来 困惑 。 

为 了 确保 你 的 标记 有 效 地 使 用 了 标题 ,不 妨 考虑 在 禁用 CSS 之 后 查看 网 页 。 内 容 层 级 ( 包括 
任何 交互 功能 ) 应 该 是 清晰 的 ， 就 像 大 纲 一 样 。 如 果 没 有 明确 且 可 预测 的 标题 结构 ， 用 户 浏览 网 
页 时 就 可 能 很 难 找到 重点 信息 和 内 容 结 构 。 

在 增强 体验 里 , 标题 可 以 用 CSS 和 JavaScript 转 变 成 交互 组 件 上 的 可 点 击 标 签 ， 比 如 手风琴 式 
( accordion ) 或 分 组 式 标签 页 组 件 。 这 些 增强 功能 同样 依赖 于 恰当 且 一 致 的 结构 。 比 如 ， 在 标签 
页 栏 里 与 其 他 标题 平起平坐 的 标题 应 当 使 用 与 前 者 等 级 一 致 的 h 元 素 。( 后 续 章 节 会 详细 讨论 这 
些 转变 标题 的 方式 : 手风琴 式 展 开 参 见 第 8 章 ， 树 形 控件 参见 第 11 章 ， 标 签 页 参见 第 9 章 。) 

2. 段落 文字 

段落 是 块 级 元 素 ， 用 于 在 网 页 中 把 叙述 性 内 容 分 解 成 多 个 想法 或 观点 。 

《<p> 这 是 一 段 文字 ， 包 含 在 一 个 段落 标签 中 。</p> 

<p> 我 是 第 二 个 段落 。 我 用 两 后 话 表 达 一 个 完整 的 观点 。</p> 

我 们 不 建议 用 段落 元 素 标记 任何 不 属于 连续 段落 文字 的 内 容 。 栏 目 和 高 层级 内 容 群 组 这 样 的 
布局 结构 应 该 使 用 div 标 记 ， 如 果 是 归 组 一 个 表单 里 的 多 个 部 分 则 用 fieldset。 

3. 引用 文字 

引用 文字 可 以 通过 多 种 方式 标记 。 但 是 ， 只 有 一 种 ( 即 blockquote， 它 是 一 种 设计 用 于 长 篇 
引用 文字 的 元 素 ， 类 似 段 落 那 种 形式 ) 应 该 用 在 基础 标记 里 ， 因 为 它 在 各 种 浏览 器 里 泻 染 一 致 ， 
无 需 做 任何 的 CSS 或 JavaScript 变 通 。 

引用 的 内 容 放 在 blockquote 元 素 里 ， 来 源 URI 则 可 以 在 开始 标记 中 的 cite 属 性 里 注 明 : 


<blockquote cite="http://www.filamentgroup.com"> 我 们 为 网 络 应 用 程序 、 移 动 设备 和 触摸 屏 终端 设计 引 人 入 
胜 的 用 户 界面 ， 它 们 不 仅 简单 ， 而 且 每 个 人 都 能 访问 。</blockquote> 





















































































































































用 正确 的 方式 控制 分 行 和 空 

自从 HTMIL 发明 以 来 ， 开 发 者 喜欢 用 分 行 符 和 不 间断 空格 ( non-breaking space ) 来 控制 内 
容 布局 和 调节 间距 ， 而 不 是 用 恰当 的 段落 或 其 他 语义 标记 ( 以 及 CSS )， 因 为 有 时 增加 一 个 或 
多 个 分 行 标签 更 容易 。 但 是 ， 错 误 使 用 这 些 标签 可 能 会 严重 降低 内 容 的 可 读 性 。 

分 行 ( 使 用 <br/> 标 签 ) 表示 在 文本 的 菜 个 特定 位 置 插 入 一 个 硬 回 车 (hard carriage return )。 
虽然 这 个 元 素 有 它 的 合理 用 途 ， 比 如 给 地 址 分 行 ， 但 它 不 应 该 用 来 给 页 面 布 局 增加 重 直 空间 。 
需要 特别 注意 : 在 1024 x 768 的 屏幕 分 辩 率 下 看 起 来 不 错 的 分 行 ， 可 能 会 在 小 得 多 的 屏幕 ( 比 
如 手持 设备 上 的 屏幕 ,或 者 字体 放大 后 的 标准 屏幕 ) 上 显得 焉 斜 ， 或 者 留 下 孤零零 的 单词 。 只 
要 有 可 能 ， 最 好 让 文字 自然 换行 , 填 满 所 有 可 用 空间 。 如 果 必 须 精 确 分 行 才能 正确 阅读 菜 一 块 
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内 容 ， 比 如 显示 源 代码 或 者 诗歌 词句 时 ， 还 可 以 考虑 使 用 预 格式 化 文本 的 pre 元 素 。 

类 似 地 ， 不 间断 空格 ( 指定 的 字符 记号 是 &nbsp;， 或 者 字符 实体 呼 160; ) 被 设计 用 于 连接 
两 个 单词 ， 它 们 中 间 虽 然 有 一 个 空格 , 但 是 应 该 位 于 同一 行 中 ,不 能 独立 换行 。 这 个 空格 有 它 
的 合理 用 途 ， 比 如 确保 专 有 名 词 、 产 品名 称 或 者 注册 成 商标 的 语句 总 是 一 起 出 现 。 但 是 , 不 间 
断 空格 经 常 被 错误 用 于 快速 添加 元 素 之 间 的 水 平 间隔 。 这 种 做 法 就 像 过 度 使 用 分 行 一 样 会 带 来 
一 些 风 险 ， 比 如 你 的 一 些 用 户 可 能 会 看 见 奇 怪 的 空白 、 孤 零 零 的 单词 或 者 别扭 的 分 行 。 更 安全 
的 方法 是 使 用 CSS 视 情况 调整 外 边 距 或 者 内 边 距 ， 以 此 在 元 素 间 制造 空间 。 








需要 同时 显示 引用 语 和 引用 来 源 时 ， 可 以 使 用 内 骸 于 blockquote 中 的 cite 元 素 : 

<blockquote cite="http://www.filamentgroup.com"> 我 们 为 网 络 应 用 程序 、 移 动 设备 和 触摸 屏 终端 设 计 引 人 入 
胜 的 用 户 界 面 ， 它 们 不 但 简单 ， 而 且 每 个 人 都 能 访问 。 

<cite>ToddParker，Filament 集 团 公 司 负 责 人 </cite> 


</blockquote> 

HTML4 规 范 还 列 出 了 一 个 内 联 元 素 〈 即 q 元 素 )， 它 被 设计 用 于 简短 的 引用 文字 ， 比 如 一 句 
对 话 : 

<p>The Donald exclaimed, <q>You're fired !</q></p> 

理论 上 ,浏览 器 应 当 基 于 网 页 语言 设置 或 引用 文字 是 否 敬 套 等 上 下 文 背景 信息 演 染 出 适当 的 
引号 。 根 据 HTML4 规 范 :“ 视 觉 性 用 户 代理 必须 确保 使 用 定 界 引 号 来 演 染 q 元 素 的 内 容 ” 
( http://t.cn/zRIYafG )。 但 是 ,浏览 器 实现 q 元 素 的 方式 并 不 一 致 , 最 值得 注意 的 就 是 Internet Explorer 
根本 不 会 泻 染 出 q 元 素 的 引号 。 


























修复 不 可 预测 的 q 元 素 
由 于 qd 元 素 的 泻 染 方 式 相 当 不 可 预测 ， 我 们 建议 谨慎 地 使 用 它 ， 并 用 CSS 重 置 (reset ) 举 
试 让 它 在 各 种 浏览 器 里 表现 出 一 致 的 样式 。 
推荐 读者 阅读 下 列 文章 ， 了 解 让 q 元 素 在 各 种 浏览 器 里 样式 一 致 的 信息 。 


“CSS reset and quirky quotes” : http://t.cn/zRIYK1S 
“Fixing Quotes in Internet Explorer” : http://t.cn/zRIYNY7 


4. 预 格式 化 文本 和 代码 

如 果 文 本 已 经 预先 格式 化 过 ,必须 精确 按照 原 有 写法 显示 ,就 可 以 使 用 pre 元 素 。pre 元 素 通 
知 浏览 器 要 显示 出 每 一 个 分 行 或 字符 空格 , 而 且 通 常 将 文字 的 样式 设 为 固定 宽度 的 字体 。 它 对 于 
显示 诗歌 、 文 字 艺 术 图 和 公式 等 需要 进行 特别 格式 化 的 内 容 来 说 很 有 用 

<pie title=" 摘 自 Emily Dickenson 的 某 首 诗 "> 

The daisy follows soft the sun, 

And when his golden walk is done, 


Sits shyly at his feet. 
He, waking, finds the flower near. 





























[e] 
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"Wherefore, marauder, art thou here?" 
"Because, sir, love is sweet!" 
</pre> 


在 专门 格式 化 代码 ( 比如 多 行 HTML 或 JavaScript ) 时 ， 可 以 将 code 元 素 与 pre 元 素 一 起 使 用 。 
code 和 pre 两 个 元 素 同时 使 用 时 会 保留 内 容 里 的 特定 分 行 位 置 。 请 注意 标记 里 使 用 的 字符 ( 比如 & 
字符 , 或 者 用 于 开始 和 关闭 标签 的 小 于 “<” 和 大 于 “>” 符 号 ) 必须 编码 为 字符 实体 ， 这 样 浏览 

器 才 会 将 它们 解读 为 文本 。 


<pre> 

<code> 

// 包括 下 面 的 脚本 块 : 

&lt;script&gt; 
var el = document.getElementById(&quot;foo&quot;); 
alert(el); 

&lt;/script&egt; 

</code> 

</pre> 


5. 缩写 词 

使 用 abbr 元 素 可 以 向 那些 不 熟悉 缩写 术语 或 首 字 母 组 合 词 的 人 (以 及 屏幕 阅读 需 、 搜 索引 擎 
蜂 蛛 或 者 翻译 系统 ) 提供 即时 的 解释 。 要 给 一 个 abbr 元 素 添加 完整 或 扩展 的 文字 ， 可 以 包括 一 个 
title 属 性 ， 在 大 多 数 桌 面 浏览 需 里 ， 它 会 在 鼠标 悬 停 在 某 个 单词 上 方 时 显示 出 一 条 提示 。 


<p>The United States is a member of <abbr title="North Atlantic Treaty Organization">NATO</abbr>.</p> 

















注意 ”类似 的 一 个 元 素 acronym 被 用 于 标识 文本 中 的 首 字母 组 合 词 , 不 过 按照 计划 它 会 从 HTML5 
规范 中 去 除 。 我 们 建议 使 用 缩写 词 来 代替 它 : http://dev.w3.org/html5/html4-differences。 


6. 强调 性 内 容 

要 强调 一 个 单词 或 词组 可 以 使 用 em 或 strong 元 素 ( strong 意 味 着 程度 更 高 的 强调 )。 这 些 元 
素 既 可 以 分 开 使 用 ， 也 可 以 符 套 使 用 : 

<p> 这 个 句子 使 用 了 <em> 多 个 <strong> 强 调 </strong>《/em> 标 签 。《/p> 

虽然 大 多 数 浏览 器 默认 将 em 标签 里 的 文字 以 斜体 显示 ，strong 标 签 里 的 文字 则 是 粗 体 , 但 是 
如 果 无 需 进行 额外 强调 ， 这 些 元 素 就 不 应 当 简单 用 于 进行 视觉 格式 化 。 

如 果 需 要 赋予 文本 较 低 的 内 容 层 级 ， 比 如 脚注 和 说 明文 字 ， 可 以 使 用 smal1 元 素 : 


<p> 人 类 首次 登 月 是 在 1964 年 。<small> 来 源 : Wikipedia,，2009</small></p> 



































注意 能 希望 屏幕 阅读 器 在 朗读 这 些 元 素 里 的 文本 时 使 用 不 同 的 强调 语气 ， 但 是 在 写作 本 
最 新 版 的 流行 屏幕 阅读 器 JAWS 和 Window-Eyes 在 朗读 用 这 些 元 素 标记 的 文本 时 ， 
和 普通 文本 没有 任何 区 别 ( www.paciellogroup.com/blog/?p=41 )。 即 便 如 此 ， 用 它们 给 内 
容 里 的 单词 或 词组 添加 语义 强调 仍然 是 一 种 好 的 做 法 ， 而 且 一 旦 今后 的 新 版 屏幕 阅读 器 
增加 了 这 一 功能 ， 你 已 经 为 它 打 好 了 基础 。 
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7. 上 标 和 下 标 
上 标 和 下 标 字 符 在 某 些 语言 和 科学 环境 中 是 必需 的 , 可 以 使 用 sup ( superscript， 上 标 ) 和 sub 
( subscript， 下 标 ) 元 素 进行 内 联 添加 。 


H<sub>2</sub>0 
E = mc<sup>2</sup> 





注意 ”如果 必须 大 量 使 用 数学 表达 式 或 科学 符号 ， 请 考虑 使 用 一 种 包含 更 准确 语义 标签 的 标记 
语言 ， 比 如 MathML 来 代替 这 些 元 素 进行 标记 。 


3.1.2 ”列表 


列表 将 所 列 的 项 目 归 组 到 一 个 容器 中 ， 它 有 三 个 基本 类 别 。 
无 序列 表 呈 现 一 组 项 目 时 没有 任何 隐 仿 顺序， 比如 一 张 购物 单 , 在 大 多 数 浏览 器 里 的 演 染 方 
式 是 在 每 个 项 目前 面 加 一 个 小 点 。 
<Uul title=" 我 的 购物 单 "> 
《<li> 和 牛奶 </1i> 
<1i> 鸡 掉 </1i> 
<1i> 黄 油 </1i> 
</ul> 








注意 一 个 好 的 做 法 是 用 无 序列 表 标 记 导 航 链接 ， 因 为 现代 屏幕 阅读 器 可 以 辨认 出 标记 结构 里 
的 这 些 列 表 ， 并 向 用 户 提供 从 页 面 其 他 区 域 跳 往 / 跳 离 此 内 容 的 方法 。 


有 序列 表 包 含 了 优先 级 或 者 顺序 ,在 大 多 数 浏览 器 里 的 泻 染 方式 是 在 每 个 项 目前 面 加 一 个 连 
续 数 值 。 它 们 可 以 用 于 表示 目录 或 者 电影 队列 。 
<01 title=" 目 录 : HTML 简 史 "> 
<]i> 过 往 岁 月 </1i> 
<1i> 当 前 的 最 新 进展 </1i> 
<1i> 未 来 1 </1i> 
</01> 


无 序列 表 和 有 序列 表 可 以 互相 髋 套 ， 可 以 将 山 元 素 放 进 1i 元 素 中 创建 新 的 层级 。 

定义 列表 ( definition lists ) 类 似 于 无 序列 表 ，, 但 与 为 每 个 列表 项 分 配 单 个 1i 元 素 不 同 ， 定 义 
列表 包含 的 是 元 素 组 : dt ( term， 术语 ) 和 dd ( definition， 定义 )。 就 像 字典 条 目 一 样 ， 定 义 列表 
里 的 术语 可 以 有 不 止 一 个 定义 , 因此 每 个 dt 都 允许 有 多 个 dd 元 素 。 定 义 列表 对 于 标记 功能 与 描述 、 
姓名 与 传记 或 问题 与 答案 这 些 列表 而 言 是 最 理想 的 。 

<dl title=" 生 于 19 世 纪 的 著名 人 物 "> 


<dt>Abe Lincoln</dt> 
<dd>US president, born 1862</dd> 
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<dt>Albert Einstein</dt> 

<dd>Genius physicist, born 1879</dd> 

<dt>Babe Ruth</dt> 

<dd>Baseball hero, born 1895</dd> 
</dl> 


3.1.3 ”表格 式 数 据 


表格 被 设计 用 于 显示 表格 式 数 据 。 每 张 表格 必须 至 少 包 含 table 、tr (table row， 表 格 行 ) 
和 td (table data cell， 表 格 数据 单元 格 ) 元 素 才能 通过 验证 ， 而 且 在 大 多 数 情况 下 还 应 该 包含 th 
( table header， 表 格 头 ) 标签 来 区 分 数据 值 所 在 的 行 或 者 列 。 还 有 一 些 有 用 的 可 选 标签 可 以 用 来 
给 表格 式 数据 添加 语义 上 的 意义 ， 比 如 使 用 caption、thead、tfoot 和 tbody 标 签 标 明和 归 组 表格 
的 各 个 部 分 。 

该 选择 哪些 结构 性 元 素 要 根据 数据 的 复杂 程度 ,以 及 它 本 应 如 何 使 用 或 在 视觉 上 如 何 显示 而 
定 。 举 个 例子 ,请 比较 下 面 两 张 表 格 ， 它 们 的 结构 都 使 用 了 有 效 且 可 访问 的 标记 。 第 一 张 表格 的 
形式 是 最 简单 的 ， 标 记 里 只 包含 了 列 、 表 格 头 和 单元 格 : 


<table> 
<tr> 
<th>State</th> 
<th>Capital city</th> 
</tr> 
<tr> 
<td>Massachusetts</td> 
<td>Boston</td> 
</tr> 
<tr> 
<td>Minnesota</td> 
<td>St. Paul</td> 
</tr> 
</table> 


第 二 张 表格 有 着 复杂 的 结构 ， 包 含 了 一 个 caption 用 作 表 格 标 题 ， 内 容 则 进一步 划分 成 表格 
头 (thead )、 表 格 尾 (tfoot ) 和 表格 主体 ( tbody ) 三 部 分 。 


<table cellspacing="0"> 
<caption>Annual Sales:</caption> 
<thead> 
<tr> 
<th rowspan="2" id="department">Department</th> 
<th colspan="4" id="year-2008">2008</th> 
</tr> 
<tr> 
<th id="Q1">01</th> 
<th id="02">02</th> 
<th id="03">03</th> 
<th id="04">04</th> 
</tr> 
</thead> 
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<tfoot> 
<tr> 
<td colspan="5">Data valid as of December 2009</td> 
</tr> 
</tfoot> 
<tbody> 
<tr> 
<td headers="department">Toys &#38; Games</td> 
<td headers="01 year-2008">1.4M</td> 
<td headers="02 year-2008">2.2M</td> 
<td headers="03 year-2008">2.8M</td> 
<td headers="04 year-2008">2.1M</td> 
</tr> 
<tr> 
<td headers="department">Appliances</td> 
<td headers="01 year-2008">1.4M</td> 
<td headers="02 year-2008">2.2M</td> 
<td headers="03 year-2008">2.8M</td> 
<td headers="04 year-2008">2.1M</td> 
</tr> 
</tbody> 
</table> 


按照 HTML 规 范 ，tfoot 应 该 紧 跟 在 thead 之 后 (并且 在 tbody 之 前 )， 这 样 网 页 会 先 加 载 表格 
头 和 表格 尾 , 然后 才 是 数据 行 。 像 这 样 将 一 张 表格 里 的 各 个 部 分 归 组 进 thead、tfoot 和 tbody 元 素 
是 很 有 用 的 , 特别 是 在 组 织 需 要 好 几 秒 或 者 更 长 时 间 才 能 加 载 的 超大 数据 集 时 ， 因为 表格 头 和 表 
格 尾 元 素 会 更 快 加 载 ， 并 向 用 户 提供 反馈 。 
通过 将 表格 头 和 表格 主体 的 单元 格 分 人 不 同 块 ， 就 可 以 将 CSS 规 则 单独 作用 于 thead 、tfoot 
和 tbody 元 素 ， 使 它们 在 视觉 上 有 所 区 别 ， 或 者 组 合 使 用 CSS 和 JavaScript 给 表格 主体 设置 一 个 
overflow 属 性 ,这 样 表格 头 一 栏 就 能 保持 固定 不 动 ( 在 基于 WebKit 或 Mozilla 的 浏览 器 里 只 需 使 用 
CSS 就 能 实现 这 个 效果 ，Internet Explorer 则 需要 借助 JavaScript 才 能 生效 )。 

在 像 上 面 第 二 个 例子 这 样 相对 复杂 的 表格 中 , 一 个 单独 的 表格 头 横 跨 了 多 列 或 者 多 行 。 从 浏 
览 器 的 呈现 方式 看 , 表格 头 和 数据 单元 格 之 间 的 关系 可 能 显得 很 明确 , 但 是 当 屏幕 阅读 器 等 非 视 
觉 性 用 户 代理 解读 标记 时 , 这 种 联系 可 能 就 没 那么 明显 了 。 为 了 确保 使 用 辅助 技术 的 用 户 不 会 错 
失 宝 贵 的 数据 联系 ， 可 以 给 每 一 个 th 指定 一 个 独一无二 的 ID ， 为 每 个 单元 格 添加 headers 属 性 ， 
然后 把 表格 头 ID 写 人 headers 属 性 ， 将 每 个 单元 格 映 射 到 它 对 应 的 表格 头 上 。 每 个 headers 属 性 可 
以 指向 多 个 ID ，ID 之 间 用 空格 分 隔 。 

还 可 以 使 用 caption 元 素 添 加 表格 说 明 ， 或 者 提供 用 户 解读 数据 可 能 需要 的 额外 信息 。 
caption 元 素 应 当 在 开头 的 table 标 签 之 后 紧 跟 着 写 进 表格 结构 中 ， 位 于 表格 主要 内 容 的 前 面 。 默 
认 情 况 下 ， 表 格 说 明 直 接 显示 在 表格 上 方 ， 就 像 是 个 标题 。 




































































注意 table 标签 里 的 summary 属 性 和 表格 说 明 大 体 上 是 重复 的 , 所 以 在 HTML5 规 范 中 被 去 掉 了 。 
因此 ， 我 们 建议 在 需要 额外 添加 帮助 解释 信息 时 使 用 caption， 而 不 是 summary。 
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在 增强 体验 里 ,表格 式 数据 可 转换 成 图 表 、 曲 线 图 和 其 他 可 视 化 形式 。 请 参见 第 12 章 了 解 如 
何 实现 这 些 转换 。 


终于 不 需要 用 表格 布局 了 
在 CSS 成 为 绝 大 多 数 浏览 器 支持 的 网 络 标准 前 ， 开 发 者 们 通常 依靠 表格 来 布局 网 页 内 容 。 
他 们 经 常会 制作 复杂 赃 套 的 表格 来 格式 化 页 面 里 的 每 一 个 内 容 块 ， 甚 至 还 引入 了 “空白 间隔 ” 
图 像 来 模拟 内 边 距 和 外 边 距 。 
既然 现在 CSS 已 经 被 广泛 使 用 , 就 不 再 需要 这 样 依赖 表格 了 ， 可 以 让 它们 回 到 原本 的 用 途 
上 显示 表格 式 数据 。 我 们 从 来 不 推荐 用 表格 实现 布局 。 


3.1.4 ”图 像 


ing 标签 将 图 像 嵌 入 网 页 中 。 因 为 图 像 除了 源 文件 名 之 外 不 包含 语义 上 的 意义 ， 所 以 很 重要 
的 一 点 是 要 用 alt 属 性 提供 描述 性 的 文字 给 屏幕 阅读 器 、 搜 索引 擎 和 禁用 图 像 的 用 户 ， 使 他 们 能 
够 理解 图 像 传达 的 内 容 。 
<img src="acme-logo.png”alt="Acme 公 司 ”/> 
以 下 是 填写 a1t 值 时 需要 注意 的 一 些 原则 。 
> 图 像 缺 失 或 不 可 见 时 ,可 显示 或 读 取 alt 属 性 的 值 ,因此 可 以 将 alt 文 本 看 作 是 图 像 的 替代 ， 
而 不 仅仅 是 一 段 描述 。 要 考虑 图 像 在 网 页 中 的 作用 ， 以 及 它 的 内 容 对 理解 页 面 大 意 而 言 
是 至 关 重 要 还 是 可 有 可 无 。 
任何 在 网 页 标记 中 纯粹 起 装饰 作用 的 图 像 ( 比如 某 种 设计 花纹 ) 应 当 包含 一 个 空白 的 alt 
属性 ,类 似 于 alt="",， 屏 幕 阅读 器 就 会 朗读 文件 名 并 继续 下 去 。 要 尽 一 切 努 力 限 制 标记 中 
内 认 的 纯 展 示 性 图 像 的 数量 ， 而 且 只 要 有 可 能 ， 用 CSS 将 它们 指定 成 背景 图 像 。 
> 图 表 和 曲线 图 的 alt 文 本 应 当 简 要 描述 任何 有 关 的 结论 、 趋 势 或 数据 关系 。 一 段 内 容 为 
“2009 年 总 销售 量 折线 图 ”的 alt 描 述 远 不 如 “2009 年 度 的 总 销售 量 曲线 图 显示 出 18% 的 增 
幅 ， 从 1020 万 增 至 1210 万 (美元 ”有 用 。 
照片 和 插图 只 有 在 它们 是 真正 的 内 容 ， 而 且 对 网 页 大 意 至 关 重 要 时 才 应 当 被 详细 描 
述 。 不 要 把 alt 当 成 是 视觉 图 像 的 说 明文 字 ， 例 如 “ 张 三 的 肖像 ”。 但 是 别 忘 了 描述 能 
给 网 页 大 意 增 添 背景 因素 的 有 用 信息 ， 例 如 “这 张 肖像 属于 20 岁 时 的 张 三 ， 一 个 脏 分 
今 、 披 头 散发 的 牛仔 ， 身 着 皱 皱 的 白 衬 衫 和 和 牛仔裤， 观察 着 他 和 蒙 大 拿 农庄 里 的 崎 哎 
地 形 ”。 
> 没有 必要 将 “图 像 ” 一 词 包括 在 描述 当中 ,因为 屏幕 阅读 带 一 般 会 把 role 和 文本 一 起 朗读 
出 来 。 举 个 例子 ， 要 使 用 alt=" 一 匹 马 和 骑手 "， 而 不 是 alt=" 一 匹 马 和 骑手 的 图 像 "， 因 为 
它 可 能 会 被 读 成 “一 匹 马 和 骑手 图 像 的 图 像 ”。 
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3.1.5 ”内 入 式 富 媒体 


在 网 页 中 悉 和 人 富 媒体 的 最 佳 做 法 一 直 以 来 都 有 争议 , 它们 经 常 改变 , 以 适应 私有 内 容 分 发 之 
间 的 竞争 格局 。 富 媒体 最 常见 的 网 络 分 发 技术 需要 用 到 浏览 器 插 件 ， 例 如 Adobe Flash、 苹 果 的 
QuickTime 、Sun Java 或 者 微软 的 Silverlight， 而 且 般 入 页 面 的 方式 也 有 好 多 种 ， 比 如 使 用 object 
元 素 ， 或 者 emped 等 非 标准 元 素 ， 很 多 时 候 还 会 同时 使 用 这 两 个 元 素 。 
插件 虽然 很 流行 ， 但 却 存在 着 很 多 缺点 。 

P 对 用 户 来 说 ， 为 了 浏览 网 页 从 而 不 断 下 载 和 升级 插件 可 能 是 件 很 烦人 的 事 ; 对 开发 者 来 
说 ， 随 着 插件 的 发 布 、 升 级 或 者 终止 ， 富 媒体 内 容 需 要 不 断 维护 。 
> 插件 的 格式 将 内 容 封 装 起 来 ， 这 可 能 会 导致 内 容 难 以 被 搜索 引擎 、 屏 幕 阅读 器 和 移动 设 
备 访问 到 。 残 障 用 户 经 常会 被 完全 排除 在 富 媒体 内 容 之 外 ， 原 因 是 提供 商 认为 通过 某 
特定 插件 分 发 可 访问 的 内 容 花 费 过 高 ， 或 者 过 于 复杂 ， 有 时 则 是 技术 上 不 可 行 。 
> 内 容 的 分 发 依赖 于 插件 制作 公司 对 其 产品 的 持续 支持 ， 这 可 能 会 让 那些 希望 确保 内 容 持 
入 性 的 人 感到 担忧 。 

所 有 这 些 原 因 导 致 人 们 对 一 种 标准 化 富 媒体 分 发 系统 的 需求 空前 强烈 。 幸 好 ，HTML5 规 范 
引入 了 几 种 可 用 于 奶 人 式 富 媒体 的 元 素 ( video 、audio 以 及 用 来 生成 图 像 和 动画 的 canvas ), 它们 
简单 、 可 访问 并 且 面 向 未 来 。 

HTML5 的 video 元 素 可 以 将 视频 内 容 诅 人 至 网 页 中 , 方式 和 添加 图 像 几乎 一 模 一 样 。 只 和 需 简 
单 地 将 video 标 签 搬入 标记 中 ,把 它 的 src 属 性 指向 某 个 视频 文件 的 URL， 然 后 支持 此 功能 的 浏览 
器 (就 目前 而 言 ， 需 要 最 新 版 的 Safari、Firefox 和 Opera ) 就 会 向 用 户 提 供 一 套 原生 界面 ， 供 他 们 
观看 视频 和 对 播放 过 程 进行 控制 。 

<video src="myvideo 320x240.0gg" /> 


HTML5 的 audio 元 素 与 video 元 素 很 相似 。 当 然 ， 区 别 在 于 它 租 入 网 页 的 是 一 个 音频 文件 。 
只 需 简 单 地 将 audio 标 签 插 入 标记 中 ， 然 后 把 它 的 src 属 性 设置 成 某 个 音频 文件 的 URL 即 可 : 


<audio src="myfavoritesong.wav"></audio> 


另外 ，audio 和 video 元 素 两 者 都 拥有 能 控制 播放 过 程 的 原生 JavaScript API， 可 以 借助 许多 事 
件 ， 创 造 出 能 与 任何 基于 插件 的 实现 方式 相 媲 美的 交互 性 。 这 些 API 记 录 在 w3.org 网 站 上 的 
HTML5 规 范 里 。 

HTML5 为 图 形 富 媒体 ( 例如 交互 性 图 表 或 功能 图 形 动画 ) 提供 了 canvas 元 素 ， 你 可 以 把 它 
看 做 一 种 图 像 元 素 ， 但 却 内 含 一 套用 于 绘制 图 形 的 JavaScript API。( 第 12 章 会 提供 一 个 例子 ， 展 
示 如 何 将 表格 式 的 HTML 数 据 转换 成 基于 canvas 的 图 表 ， 并 能 在 所 有 主流 浏览 器 里 显示 。) 

这 三 个 元 素 都 支持 在 开始 和 结束 标签 之 间 放 置 标记 ， 可 以 用 来 在 不 支持 HTML5 标 准 的 浏览 
器 里 引用 内 藤 媒 体 的 替代 图 像 或 文本 ， 或 者 提供 操作 说 明 或 链接 ， 以 便 用 户 访问 来 源 。 


<video src="myvideo 320x240.0gg"> 
哎呀 ， 你 看 到 这 条 消息 是 因为 你 的 浏览 器 不 支持 kcode>video</code> 元 素 。 要 观看 这 段 视频 ， 
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请 <a href="myvideo 320x240.0gg"> 下 载 myvideo 320X240.0gg</a>， 然 后 在 别 的 应 用 程序 里 播放 。 
</video> 


虽然 HTML5 规 范 仍然 在 审议 当中 ， 但 我 们 强烈 建议 现在 就 用 这 些 元 素 敬 入 富 媒体 ， 代 将 原 
来 的 私有 插件 ， 因 为 它们 的 语义 更 为 丰富 ( 每 个 开始 标签 都 标明 了 内 容 的 类 型 和 来 源 )， 而 且 更 
重要 的 是 , 它们 支持 添加 替代 性 标记 以 兼容 不 支持 这 些 元 素 的 浏览 器 。 如 果 必 须 为 别 的 浏览 器 提 
供 另 一 种 富 媒体 作为 蔡 代 品 ， 你 可 以 〈 举 个 例子 ) 写 一 个 脚本 检测 浏览 器 是 否 支 持 video 元 素 ， 
如 果 不 支 持 则 插入 另 一 种 元 素 ( 比如 object )， 将 浏览 器 指向 它 能 够 读 取 的 视频 文件 格式 。 









































3.1.6” 明 入 外 部 网 页 内 容 


在 Ajax 引入 无 需 整 体 刷新 就 能 动态 更 新 部 分 页 面 区 域 的 能 力 之 前 ， 开 发 者 们 使 用 frame 和 
iframe 实 现 类 似 (不 过 没 那么 复杂 ) 的 功能 。 

frame 和 iframe 元 素 都 被 设计 用 于 将 外 部 内 容 引 入 网 页 ,它们 加 载 整 张 HTML 网 页 及 其 所 有 附 
属 内 容 。frame 元 素 从 属于 一 个 更 大 的 元 素 群 组 框架 ， 这 个 名 为 frameset 的 框架 取代 了 body 标 签 ， 
将 网 页 分 割 成 数 个 可 能 相互 关联 或 者 依赖 的 区 域 。iframe 元 素 则 被 设计 用 于 内 联 搬入 ,与 其 他 标 
记 平 等 相处 。 

frame 和 iframe 元 素 带 来 的 灵活 性 〈 可 用 于 建设 极度 复杂 的 网 站 ， 内 含 这 度 仍 套 的 框架 组 来 
模拟 服务 器 端 常见 的 复杂 依赖 结构 ) 会 导致 严重 的 可 访问 性 、 导 航 和 页 面 性 能 问题 。 因此 , frame、 
frameset 和 noframes 元 素 在 HTML5 规 范 中 被 去 掉 了 , 原因 是 “使 用 它们 会 对 终端 用 户 的 可 用 性 与 
可 访问 性 造成 负面 影响 ”( www.w3.org/TR/html5-diff/#absent-elements )。 

谢 天 谢 地 ， 用 髓 套 的 frameset 来 构建 页 面 的 日 子 早 已 过 去 。 但 是 ， 即 使 在 今天 也 可 能 会 出 现 
一 些 情形 ,导致 必须 出 现在 页 面 里 的 内 容 无 法 包括 在 页 面 标记 中 。 这 也 许 是 因为 内 容 被 托管 在 外 
部 网 站 上 ， 也许 是 因为 内 容 的 格式 会 造成 视觉 冲突 ， 所 以 不 能 直接 插入 网 页 。 在 这 些 情况 下 ,你 
可 能 使 用 iframe 呈 现 此 内 容 ( 不 过 我 们 建议 尽量 不 要 这 么 做 ， 因 为 这 种 方式 存在 性 能 与 可 访问 性 
方面 的 缺点 )。 

在 那些 适合 使 用 iframe 的 场合 ,我 们 建议 编写 基本 版 网 页 时 使 用 一 个 指向 资源 的 锚 链 接 
( anchor， 即 a 元 素 ) 并 包含 一 段 文字 描述 ， 然 后 再 用 JavaScript 生 成 并 插入 一 个 iframe 元 素 ， 在 它 
的 src 里 填 人 锚 链 接 元 素 的 href 属 性 。 

举 个 例子 ， 我 们 会 在 用 于 输出 到 所 有 浏览 器 的 基础 HTML 里 写 和 一 个 标准 的 锚 链 接 标 签 : 

<a href="http://filamentgroup.com”class="inline-content"> 我 最 爱 的 设计 公司 《</a> 

如 果 能 力 测试 成 功 通过 , 就 用 鳃 链接 的 href 属 性 创建 一 个 iframe, 在 网 页 里 内 联 显 示 整 个 网 站 : 

<iframe src="http://filamentgroup.com"></iframe> 

在 网 页 里 插入 iframe 后 ,可 以 把 锚 链 接 隐藏 起 来 ， 也 可 以 让 它 留 在 增强 体验 里 ,以 便 用 户 直 
接 访问 该 网 站 : 

<iframe src="http://filamentgroup.com"></iframe> 

<a href="http://filamentgroup.com">Filament 集 团 的 网 站 </a> 
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3.2 标记 交互 内 容 


交互 性 是 万 维 网 的 一 个 基本 特征 ， 而 语义 标记 提供 了 众多 的 选项 来 支持 一 系列 具体 交互 类 
型 ， 从 简单 的 链接 到 复杂 的 数据 输入 表单 不 等 。 

原生 HTML 交 互 元 素 的 内 置 功能 很 丰富 : 它们 帮助 实现 跳 转 ; 捕捉 和 提交 数据 , 并 显示 反馈 ; 
为 各 种 浏览 器 和 设备 环境 下 可 行 的 键盘 和 鼠标 交互 提供 支持 。HTML 的 表单 元 素 提供 了 捕捉 用 户 
输入 的 首要 方式 ， 以 及 将 其 提交 回 服务 器 进行 存储 或 处 理 。 

考虑 如 何 构建 包含 花哨 的 CSS 和 JavaScript 增 强 交 互 组 件 的 网 页 基础 标记 时 , 理解 原生 交互 元 
素 的 语义 意义 和 独特 能 力 显得 尤为 重要 。 与 增强 体验 的 代码 不 同 ， 基 础 标记 必须 不 依赖 CSS 或 
JavaScript 的 协助 也 能 正常 工作 ( 使 用 户 有 机 会 完成 所 需 的 全 部 任务 )。 

前 一 章 描述 了 X 光 透视 , 它 是 一 种 将 复杂 设计 分 解 成 基本 却 具备 功能 的 多 个 部 件 的 方式 。 例 
如 ， 观 察 到 某 个 自 定义 的 下 拉 菜 单 其 实 愉 不 过 是 美化 过 的 select 元 素 , 或 者 某 个 滑 块 其 实 是 两 个 
文本 输入 框 的 化 身 ， 用 于 捕捉 一 系列 数值 。 本 书 第 三 部 分 会 详细 讨论 一 些 增强 交互 组 件 ， 并 为 它 
们 的 基础 标记 寻找 最 佳 的 语义 选择 。 

现在 , 我 们 将 探讨 交互 和 表单 元 素 的 整体 结构 ,它们 的 主要 用 途 , 以 及 考虑 将 每 一 种 元 素 用 
于 基础 标记 时 ， 需 要 加 以 研究 的 所 有 重要 事项 。 只 要 有 可 能 ,我 们 会 注 明 某 个 元 素 在 HTML4 和 
HTML5 规 范 中 的 变化 。 我 们 还 会 列举 将 其 升级 用 于 增强 体验 的 各 种 可 能 方法 。 


3.2.1 销 链 接 


销 链 接 是 万 维 网 里 的 基本 导航 元 素 ， 用 于 链接 网 页 以 及 链接 到 同一 页 中 的 内 容 。 
要 链接 到 同一 个 网 站 里 的 另 一 页 或 者 某 个 外 部 网 站 ， 应 在 链接 的 href 属 性 中 指定 一 个 目 
标 URI: 










































































<a href="http://www.acmecorp.com”title="Acme 公 司 官方 网 站 ">Acme</a> 
要 链接 到 同一 个 网 页 内 的 某 个 位 置 ， 应 指定 该 位 置 以 # 开 头 的 唯一 id: 
xa href="#content"> 了 解 我 们 做 过 些 什么 </a> 
cdiv id="content"> 
<h1> 我 们 做 过 些 什 么 </h1> 
<p> 我们 曾 设 计 过 种 类 繁多 的 网 站 、 应 用 程序 界面 、 品 牌 化 和 印刷 项 目 ， 涉 及 各 种 行业 。</p> 
</div> 
在 增强 体验 里 ， 我 们 可 以 做 很 多 厉害 的 事情 来 改变 锚 链 接 。 举 个 例子 ， 可 以 使 用 title 属 性 
或 者 本 地 销 链 接 , 生成 在 鼠标 悬 停 时 显示 的 工具 提示 。 外 部 链接 的 URL 可 以 用 JavaScript 进 行 “ 绑 
架 "”， 窃 取 某 个 链接 上 的 鼠标 点 击 事件 后 ， 发 起 一 个 基于 href 值 的 Ajax 请 求 。 


3.2.2 ”表单 结构 
任何 网 上 交易 或 者 数据 输入 方案 都 是 用 表单 元 素 实现 的 ,结构 良好 的 表单 包括 用 数 个 基本 语 
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义 元 素 布局 工作 区 ， 再 用 一 个 或 多 个 表单 控件 来 收集 用 户 输入 并 提交 数值 以 供 处 理 。 

1. form 

每 张 表单 都 需要 的 第 一 个 元 素 当 然 就 是 form 元 素 , 它 的 action 属 性 指向 某 个 会 在 表单 提交 后 
对 其 进行 处 理 的 资源 : 

<form action="edit-account.php"> 


区 表单 元 素 放 在 这 里 …… 


</form> 


注意 HTML5 规 范 中 声明 “input、output、select、textarea、button 和 fieldset 元 素 里 的 新 
form 属 性 允许 控件 关联 到 一 张 表单 。 也 就 是 说 ， 这 些 元 素 现 在 可 以 放置 在 页 面 中 的 任何 
位 置 ， 而 不 仅仅 只 是 作为 form 元 素 的 从 属 ”( www.w3.org/TR/html5-diff/#new-attributes )。 
鉴于 已 经 有 更 多 的 浏览 器 支持 了 这 一 规范 ， 我 们 可 以 利用 这 个 新 的 属性 。 不 过 目前 来 说 ， 
我 们 建议 将 所 有 应 当 随 单个 form 元 素 一 起 提交 的 表单 控件 都 放 在 该 标签 内 ， 从 而 兼容 所 


有 浏览 器 。 


2. fieldset 和 legend 

fieldset 元 素 是 可 选 的 , 可 以 用 于 将 表单 元 素 组 织 成 不 同 的 逻辑 区 域 。 举 个 例子 , 联系 信息 、 
账单 信息 .一 对 用 户 名 和 密码 或 者 一 组 单 选 或 多 选 按钮 可 以 归 组 到 一 起 , 共享 同一 个 标题 。 legend 
元 素 位 于 fieldset 元 素 内 部 ， 是 群 组 的 标题 。 

<form action="edit-account.php" method="post"> 


<fieldset> 
<legend> 联 系 信息 </legend> 














</fieldset> 
</form> 


注意 HTML5 规 范 允 许 使 用 fieldset 元 素 的 disabled 属 性 ， 因 此 “设置 该 属性 会 禁用 其 中 的 所 
有 内 容 ”( www.w3.org/TR/html5-difft/#new-attributes )。 


3. label 

每 个 表单 控件 都 应 该 有 一 个 label 元 素来 标识 它 ， 并 提供 一 种 额外 的 方式 让 这 个 控件 获得 焦 
点 。 正 确 关 联 标签 和 控件 后 ,点击 茶 个 标签 会 自动 将 焦点 转移 到 它 的 控件 上 , 这 就 意味 着 你 可 以 
通过 点 击 标签 选择 一 个 复 选 框 。 这 是 一 种 创建 更 大 点 击 区 域 的 理想 方式 , 让 表单 对 那些 视觉 或 运 
动 控制 机 能 受 损 的 用 户 来 说 更 具 可 访问 性 。 

label 和 其 元 素 关 联 的 方式 是 指定 一 个 for 属 性 ， 将 值 疫 为 该 控件 的 ID : 

<label for="filling-1"> 花 生 普 </1abel> 






































<input type="checkbox" value="pb" name="sandwich" id="filling-1" /> 
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标签 及 其 元 素 之 间 的 这 种 关系 对 复 选 框 和 单 选 按 钮 来 说 也 很 有 用 ,可 以 借助 共享 的 点 击 事件 
自 定义 标签 ， 比 如 创建 一 个 投票 组 件 ， 就 像 Netflix 上 的 星 级 评分 一 样 。( 请 参见 第 15 章 里 的 范例 ， 
了 解 如 何 实现 。) 

某 种 设计 需要 不 带 可 见 标签 的 表单 控件 时 ( 比如 一 个 地 址 字段 可 能 由 两 个 文本 输入 框 琶 加 而 
成 , 但 两 者 只 有 一 个 标签 )， 我 们 主张 为 每 个 输入 框 都 创建 一 个 标签 ， 然 后 仅 隐藏 不 该 显示 的 那 
个 标签 : 


<label for="address-1"> 地 址 /1]abel> 
<input type="text" id="address-1" /> 





<label for="address-2”class="hidden-label"> 地 址 ， 第 2 行 </1abel> 
<input type="text" id="address-2" /> 


第 一 个 标签 “地 址 ”在 页 面 上 可 见 ， 用 户 使 用 Tab 键 跳跃 到 此 字段 时 会 获得 焦点 ; 第 二 个 标 
签 “ 地 址 ， 第 2 行 ” 出 现在 标记 里 ， 但 以 一 种 可 访问 的 方式 隐藏 起 来 ， 因 此 屏幕 阅读 器 仍然 能 够 
看 到 。 要 以 可 访问 的 方式 隐藏 第 二 个 标签 , 应 设置 一 个 较 大 的 left 值 , 将 其 绝对 定位 于 页 面 之 外 : 


.hidden-label { position: absolute; left: -9999em; } 





3.2.3 ”表单 控件 


语义 标记 包含 了 一 系列 表单 元 素 , 或 者 说 控件 。 每 一 种 都 受到 业务 规则 的 支配 , 后 者 定义 了 
它们 各 自 的 能 力 ( 包括 其 数据 选项 的 具体 结构 和 格式 ， 是否 支 持 单 选 或 者 多 选 ,各 种 选择 是 受到 
系统 限制 还 是 可 以 由 用 户 定义 )， 以 及 丰富 的 原生 交互 行为 。 这 些 元 素 为 可 靠 的 交互 英 定 了 坚实 
基础 ， 同 时 还 为 在 增强 环境 下 进行 转变 提供 了 众多 可 能 性 。 

1. 文本 输入 框 

最 简单 同时 也 可 能 最 常用 的 表单 元 素 就 是 文本 输入 框 , 它 接受 单行 字母 数字 (alphanumeric ) 
文本 : 

<input type="text" name="address" /> 

考虑 许多 组 件 的 基础 标记 时 , 文本 输入 框 都 是 理想 的 候选 表单 控件 , 因为 它 的 用 途 如 此 多 种 
多 样 ， 可 以 捕捉 字母 数字 字符 的 任意 组 合 。 

HTML5 提 供 了 许多 输入 类 型 , 从 而 更 严格 地 验证 文本 输入 框 , 例如 number、 telephone、 range 
等 。 我 们 建议 ， 只 要 能 用 上 ， 就 应 该 在 基础 标记 里 使 用 这 些 输入 类 型 ， 因 为 浏览 器 不 能 识别 这 些 
特殊 类 型 时 ， 会 仅 使 用 默认 类 型 text。 

举 个 例子 ， 下 面 的 标记 展示 了 一 个 type 为 range 的 输入 框 ， 它 包含 了 min 和 max 属 性 以 说 明 可 
接受 的 值 : 

<input type="range" min="0" max="50" value="25" /> 

range 这 种 输入 类 型 在 不 同 的 浏览 器 上 会 有 不 同 的 外 观 : Safari 4 和 Opera 10 将 这 个 输入 框 
演 染 成 一 个 滑 块 ， 而 Firefox 3.5 等 其 他 浏览 器 只 是 简单 地 将 其 泻 染 成 一 个 文本 输入 框 ， 如 图 3-1 
所 示 。 
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Safari 4 Mac nm 





Opera 10 Mac 《| 一 





Firefox 3.5 Mac 25 





图 3-1 ”多 种 浏览 器 里 的 range 输 入 类 型 (上 图 : 苹果 Mac 版 的 Safari 4。 
中 图 : Mac 版 的 Opera 10。 下 图 : Mac 版 的 Firefox 3.5 ) 


最 新 版 的 Opera 浏 览 需 〈Opera 10 ) 对 这 些 输 入 类 型 提供 了 最 详尽 的 支持 。 如 果 将 类 型 设 为 
number ，Opera 10 会 给 输入 框 演 染 出 “微调 ”( spinner ) 第 头 , 方便 用 户 使 用 鼠标 或 方向 键 增加 或 
减少 数值 ， 如 图 3-2 所 示 。 类 似 地 ，date 类 型 会 将 输入 框 泻 染 成 一 个 附带 自 定 义 日 历 控 件 的 下 拉 


菜单 。 





f2009-12 下 员 











图 3-2 ”在 Opera 10 浏 览 器 里 用 输入 类 型 date 格 式 化 年 份 


(第 16 章 会 使 用 输入 类 型 number 来 操作 某 个 自 定义 滑 块 的 值 。 ) 
新 的 placeholder 属 性 同样 来 自 于 HTML5, 它 可 以 应 用 在 文本 input 元 素 ( 以 及 textarea ) 上 ， 
在 字段 内 部 显示 出 提示 文字 ， 告 知 用 户 它 期 望 的 特定 格式 ， 如 图 3-3 所 示 。 


<label for="groceries"> 日 用 百 贷 : </label> 
<input type="text" name="groceries” id="groceries” placeholder=" 添 加 日 用 百 贷 项 ,各 项 之 间 用 运 号 分 隔 "” /> 








Groceries: 


























Hl 











图 3-3 ”Safari 4 浏览 器 里 带 有 placeholder 属 性 的 文本 输入 框 

开发 者 为 了 实现 这 种 效果 ， 通 常会 预先 生成 提示 文字 并 填 人 value 属 性 ， 这 种 做 法 会 导致 可 
访问 性 问题 , 而 且 需 要 加 以 验证 , 以 防 提示 文字 的 值 随 表单 一 起 提交 。 在 那些 不 支持 placeholder 
属性 的 浏览 需 里 ， 可 以 使 用 JavaScript 来 操作 文本 框 里 的 文字 ， 以 模拟 原生 的 实现 方式 。 

2. 文本 区 

设计 textarea 元 素 的 目的 是 输入 多 行文 本 ， 常 用 于 输入 礼品 留言 或 者 评论 等 。textarea 元 素 
有 一 个 开始 标签 和 一 个 结束 标签 ， 标 签 之 间 包 含 的 任何 内 容 都 会 显示 在 一 个 可 编辑 的 文本 框 内 。 
虽然 你 可 以 用 CSS 控 制 它 的 宽度 和 高 度 , 但 是 还 应 该 考虑 添加 cols ( 宽度 ) 和 rows ( 高度 ) 属性 ， 
设置 textarea 在 基本 体验 里 的 总 体 尺寸 : 
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<textarea cols="30" rows="10"> 
Four score and seven years ago, our fathers brought forth upon this continent a new nation... 
</textarea> 


在 某 些 有 能 力 的 浏览 器 中 ，textarea 可 转变 成 一 个 富 文本 编辑 器 ， 或 者 如 果 textarea 里 有 一 
个 各 项 由 逗号 分 隔 的 列表 , 那么 它 也 可 以 增强 成 一 个 接收 者 列表 生成 器 ， 就 像 Facebook 的 消息 接 
收 者 文本 区 那样 。( 第 18 章 会 演示 如 何 将 一 个 textarea 转 变 成 列表 生成 器 。) 

3. 复 选 框 

checkbox 元 素 的 功能 是 让 用 户 从 一 组 选项 中 选择 一 个 或 多 个 。 默认 情况 下 ,所 有 选项 都 会 内 
联 显示 在 页 面 中 , 可 以 通过 鼠标 点 击 , 或 者 在 某 个 选项 框 获得 焦点 后 按 下 空格 键 来 切换 选择 状态 。 
还 可 以 通过 添加 checked 属 性 , 使 复 选 框 默认 处 于 选中 状态 ,该 属性 只 接受 一 个 值 : checked。( 很 
好 记 吧 ? ) 

要 让 复 选 框 正确 提交 ， 一 组 复 选 框 里 所 有 选项 的 name 属 性 必须 相同 : 


<label for="filling-1"> 花 生 普 </1abel> 
<input type="checkbox" value="pb" name="sandwich" id="filling-1" /> 





















































<label for="filling-2"> 有 果冻 </label> 
<input type="checkbox" value="j" name="sandwich" id="filling-2" /> 


<label for="filling-3"> 甬 英 糖 霜 </1label> 

<input type="checkbox" value="m" name="sandwich" id="filling-3" /> 

复 选 框 可 以 增强 成 帮助 性 的 组 件 ， 比 如 自 定义 切换 按钮 。 因 为 复 选 框 是 出 了 名 地 难 用 CSS 打 
造 一 致 的 蜂 浏 览 器 样式 , 所 以 我 们 开发 了 一 种 方法 来 自 定义 复 选 框 和 标签 对 , 使 它们 能 够 实现 某 
种 自 定义 的 增强 体验 设计 。 第 15 章 会 简要 介绍 这 种 方法 。 


注意 事实 上 ,大 多 数 浏览 器 会 将 空 的 checked 属 性 (checked="" ) 解读 成 该 复 选 框 已 被 选中 。 
它们 会 忽略 空 的 引号 ， 只 看 checked 属 性 本 身 是 否 存 在 。checked 属 性 原本 被 设计 成 一 个 布 
尔 型 ( Boolean ) 选 项 , 可 以 附加 到 form 元 素 里 : <input type="text" checked>。 随 着 XHTML 
的 出 现 ， 这 一 语法 相应 发 生 了 变化 ( 变 成 了 checked="checked" ) 以 遵循 XHTML 的 语法 规 
则 。HTML5 允 许 使 用 两 种 语法 中 的 任意 一 种 。 
使 用 JavaScript 切 换 选 中 状态 时 尤其 要 注意 这 一 点 。 通 过 DOM 操 纵 选 中 状态 ( this.checked 
= true ) 比 切 换 checked 属 性 的 checked 值 更 可 靠 。 


4. 单 选 按钮 

单 选 按钮 的 作用 与 复 选 框 非常 相似 , 不 同 之 处 在 于 , 单 选 按钮 只 允许 选中 一 组 互 太 项目 里 的 
其 中 一 项 ， 而 复 选 框 则 允许 多 重 选 择 。 

基于 这 个 原因 , 单 选 按钮 的 理想 用 途 是 标记 那些 需要 从 一 小 组 选项 ( 比如 说 最 多 10 个 ) 里 进 
行 单 选 的 界面 , 以 及 某 些 适合 同时 在 屏幕 上 显示 所 有 选项 的 情形 ,比如 多 项 选择 题 测试 或 调查 问 
卷 中 的 问题 ， 评 分 或 投票 ， 或 者 某 个 零售 结账 流程 中 的 发 货 选 项 。 和 复 选 框 一 样 ， 单 选 按钮 可 以 
使 用 checked 属 性 预先 选中 ,但 是 一 组 按钮 里 任 一 时 刻 只 能 有 一 个 选中 项 。 
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与 复 选 框 的 相似 之 处 还 有 ， 单 选 按钮 很 难 用 CSS 修 改 样式 ， 不 过 同时 使 用 CSS 和 JavaScript 
就 可 以 很 容易 地 将 其 升级 ， 从 而 用 于 某 种 增强 体验 。 第 15 章 会 讨论 几 个 案例 ,里 面 将 一 些 单 选 按 
钮 增强 成 单个 滑 块 组 件 〈 比如 音量 控制 融 ) 或 者 星 级 评分 组 件 。 
5. 下 拉 列 表 框 
select 元 素 人 允许 用 户 从 一 张 预 先 定义 好 的 列表 中 单独 选择 一 个 选项 ,就 像 单 选 按钮 一 样 。 
为 原生 的 select 元 素 被 泻 染 成 只 显示 当前 选中 的 选项 ,而 非 整 张 列表 ,所 以 它 的 理想 用 途 是 那些 
必须 塞 进 紧凑 空间 里 的 大 型 列表 。select 在 激活 后 会 展开 一 张 菜单 ， 列 出 每 个 option 元 素 : 
<Select name="north-american-countries"> 
<option value="canada" > 加拿大 </optiony> 
<option value= "mexico"> 墨 西 哥 /optiony> 


<option value="united-states"> 美 国 </option> 
</select> 














提示 虽然 一 个 select 理 论 上 能 容纳 的 选项 数量 非常 大 ,但 是 出 于 可 用 性 考虑 ， 最 好 将 这 一 数 
字 限 制 在 大 约 50 以 内 ， 以 避免 滚动 列表 过 长 。 如 果 超 出 这 一 数字 ， 不妨 使 用 optgroup 元 
素 将 条 目 分 组 , 前提 是 此 内 容 适 合 分 成 子 群 组 。 在 任何 情况 下 (哪怕 选项 列表 只 包含 8~10 
个 值 )， 将 选项 以 用 户 能 理解 的 逻辑 顺序 排序 后 再 呈现 出 来 ， 都 是 一 种 体贴 的 做 法 ,能 使 
列表 易于 浏览 和 滚动 。 


每 个 option 元 素 都 包含 一 个 单词 或 词组 ， 显 示 在 select 的 下 拉 菜 单 里 ， 另 外 还 有 一 些 属性 ， 
可 以 在 提交 表单 或 将 某 个 基本 select 元 素 转 变 成 增强 体验 里 的 组 件 时 使 用 。 
> value 一 一 随 表 单一 同 提交 的 值 ( 必需 属性 )。 
做 selected 一 一 可 以 设置 为 selected， 从 而 在 页 面 加 载 时 显示 出 选中 的 option。 如 果 人 允许 多 
选 ， 那 么 可 以 有 多 个 option 具 备 这 个 属性 。 
> disabled 一 一 使 选择 荣 单 里 的 某 个 选项 可 见 但 不 可 选 。 
做 1abel 一 一 该 选项 所 含 文本 值 的 某 种 缩写 。( 此 属性 是 合法 的 ,但 不 是 所 有 浏览 器 都 能 很 好 
地 支持 。 因 此 ,不 建议 将 它 用 于 基本 体验 所 需 的 关键 信息 ， 不 过 如 果 要 编码 额外 的 意义 ， 
从 而 在 增强 组 件 里 使 用 ， 那 么 它 非 和 党 有 用 。) 
下 拉 列 表 框 里 的 option 还 可 以 通过 optgroup 元 素 分 组 到 子 群 组 中 。 虽 然 这 是 合法 的 标记 ,但 
是 optgroup 在 各 种 浏览 器 里 有 不 同 的 显示 方式 ， 结 果 导 致 无 法 保持 一 致 的 样式 。 昌 然 CSS 支 持 有 
点 受 限制 ,但 是 我 们 仍然 推荐 在 基础 标记 里 使 用 optgroup， 为 列表 提供 额外 的 语义 意义 。 
可 同时 选中 多 个 选项 ， 方 法 是 将 select 元 素 的 multiple 属 性 设置 为 multiple ( 类似 于 设置 文 
本 输入 框 的 checked 属 性 ), 不 过 不 推荐 使 用 这 一 功能 , 因为 没有 视觉 指示 器 表明 可 以 选择 多 个 项 。 
用 户 必 须知 道 要 在 按 下 Control 或 Shift 键 的 同时 点 击 才能 进行 多 选 ( 或 者 你 必须 提供 一 段 操 作 说 明 
文字 才能 达到 目的 )。 这 种 情况 下， 我 们 认为 一 组 复 选 框 更 直观 ， 而 且 更 可 用 。 
如 果 设 计 要 求 select 元 素 或 它 的 菜单 具备 自 定义 的 外 观 ( 比如 在 每 个 选项 旁边 显示 图 标 , 或 
者 用 自 定义 的 版 式 高 亮 显 示 部 分 文字 ), 可 以 从 将 select 元 素 作 为 基础 标记 着 手 。 请 参见 第 17 章 ， 
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了 解 如 何 用 这 种 方式 制作 自 定义 下 拉 列 表 框 。 

6. 用 ;input 和 button 提 交 表 单 

HTML 提 供 了 两 个 可 以 提交 表单 数据 的 元 素 : 一 个 是 type 设 置 为 submit 的 input 元 素 , 另 一 个 
是 button 元 素 ( type 同样 是 submit )。input 的 value 属 性 作为 按钮 文本 显示 ， 而 button 显 示 的 是 标 
签 内 包含 的 文字 。 下 面 两 行 代码 会 演 染 出 两 个 外 观 相似 的 按钮 : 


<input type="submit”Value=" 保 存 更 改 ”/> 
<button type="submit"> 保 存 更 改 </button> 


提交 input 和 button 的 目的 相同 : 它们 正确 包含 在 form 标 签 中 时 ， 点 击 它们 会 将 此 表单 的 数 
据 发 送 到 服务 需 。 

它们 还 可 以 很 方便 地 用 CSS 修 改 样式 。 不 过 ，button 元 素 允 许 府 套子 元 素 ， 这 就 意味 着 它 相 
比 input 能 支持 更 多 的 高 级 CSS 样 式 定义 ， 包 括 文本 层级 和 “滑动 门 ” 式 的 背景 图 像 。 


























在 Internet Explorer 里 提交 按钮 元 素 的 值 

大 多 数 浏览 器 以 相同 的 方式 处 理 表单 提交 ,无论 用 户 点 击 的 是 input 还 是 button 元 素 。 但 是 ， 
当 input 和 button 的 value 属 性 必须 和 数据 一 起 发 送 时 ， 某 些 版 本 虽 老 却 依然 很 流行 的 Internet 
Explorer ( 包括 IE 6 和 IE7 ) 存在 着 异常 情况 。 在 IE 6 或 下 7 里 点 击 按钮 后 ，button 元 素 的 innerHTML 
( 也 就 是 “保存 更 改 ”) 被 发 送 给 服务 器 ， 而 不 是 指定 的 value。 了 本 8 修正 了 这 个 问题 ， 但 是 在 旧 
版 本 被 淘汰 之 前 ， 有 必要 使 用 一 个 JavaScript 交 通 方式 ,在 所 有 浏览 器 里 正确 提交 button 的 value。 

要 想 了 解 更 多 信息 ， 请 参见 “Coping With Internet Explorer’s Mishandling of Buttons” 
(http:/t.cn/zRIYKk8P )。 

















在 基础 标记 里 ， 建 议 使 用 input 来 提交 ， 因 为 它 是 HTML 的 核心 创始 元 素 之 一 ， 历 史 可 以 回 
溯 到 HTML 规 范 最 早 的 完整 版 本 之 一 : 1995 年 发 布 的 2.0 版 。 作 为 一 种 更 加 古老 的 元 素 ，input 更 
有 可 能 会 在 老式 或 小 众 浏览 器 上 正常 工作 , 或 者 在 那些 只 部 分 支持 当前 HTML 规 范 的 浏览 吉 上 正 
常 工作 。 相 比 之 下 ，button 元 素 则 比较 新 ( 在 HTML 规 范 的 最 新 完整 版 ， 即 4.01 版 里 才 被 引入 )， 
老式 移动 设备 对 它 的 支持 偶尔 会 不 太 可 靠 。 虽然 button 在 大 多 数 浏览 器 里 应 该 都 能 用 , 但 是 更 安 
全 的 选择 是 在 基础 标记 里 使 用 input 元 素 。 

如 果 你 的 设计 需要 一 个 自 定 义 样式 的 按钮 ， 且 包含 多 个 HTML 元 素 ， 那 就 应 该 用 JavaScript 
将 input 转 变 成 button。 第 14 章 将 介绍 了 这 一 技巧 。 


3.3 创建 页 面 环境 


本 章 之 前 描述 的 这 些 语 义 标签 , 提供 了 正确 构建 网 上 显示 的 最 常见 内 容 类 型 所 需 的 工具 , 但 
是 这 些 单独 的 部 件 通常 还 需要 一 层 组 织 架 构 , 以 界面 容 吉 或 群 组 的 形式 让 它们 在 网 页 环境 中 具备 
意义 。 关 键 之 处 在 于 ,你 要 做 一 些 简单 但 却 重要 的 选择 , 确保 内 容 以 符合 逻辑 的 方式 分 组 ， 以 此 
向 使 用 你 内 容 的 各 类 人 群 和 用 户 代理 传递 最 适当 的 语义 意义 , 并 以 一 种 能 提供 最 高 效 和 最 令 人 满 
意 的 用 户 体 验 的 方式 来 呈现 它 。 
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3.3.1 了 解 何 时 该 用 块 级 元 素 或 内 联 元 素 


块 级 (block-level ) 和 内 联 元 素 在 页 面 结构 里 有 不 同 的 作用 ， 它 们 的 默认 显示 属性 也 不 同 ， 
可 能 会 影响 基础 标记 在 基本 体验 里 的 泻 染 方式 。 理 解 这 一 区 别 很 重要 , 它 关 系 到 你 能 否 为 网 站 做 
出 正确 的 选择 。 

设计 块 级 元 素 ( 包括 标题 、 段 落 、 块 引用 文字 、 列 表 、 表 格 和 div ) 的 目的 是 组 成 页 面 里 高 
层次 的 结构 和 内 容 层级 。 默 认 情 况 下 ， 块 级 元 素 在 页 面 中 垂直 堆 受 ,还 可 以 同时 包含 块 级 和 内 联 
的 子 元 素 。 内 联 元 素 ( 比如 销 链接 a 、 增 加 强调 的 元 素 em 、strong 和 smal1， 以 及 span ) 则 名 副 其 
实 : 它们 用 于 在 块 级 容器 内 与 文本 内 联 流 动 (flow ) 和 绕 排 ( wrap )。 






































提示 编写 网 页 基础 标记 时 ， 请 考虑 块 级 和 内 联 元 素 的 默认 显示 属性 对 无 CSS 或 JavaScript 页 面 
的 泻 染 方式 的 影响 ， 从 而 帮助 改进 页 面 格式 。 


用 HTML5 元 素 归 组 内 容 

一 些 HTML5 元 素 用 来 代替 div 以 实现 特定 的 布局 组 件 , 包括 section、aside、nav、article、 
header 和 footer。 虽 然 它 们 在 语义 上 比 对 应 的 通用 元 素 更 为 准确 ,但 这 些 向 前 兼容 的 HTML5 
元 素 可 能 得 不 到 旧版 或 只 具备 最 基本 功能 的 浏览 器 的 支持 ,这 就 意味 着 它们 可 能 不 会 遵守 面向 
它们 的 CSS 规 则 。 在 浏览 器 支持 得 到 改善 之 前 ， 这 些 元 素 应 该 只 用 来 增强 基础 标记 ， 而 不 应 成 
为 它 的 基本 组 成 部 分 。 或 者 你 可 以 考虑 将 它们 绕 排 在 现 有 的 结构 性 元 素 周围 , 这 样 既 可 以 利用 
它们 的 语义 优势 , 又 不 用 冒 在 不 支持 它们 的 浏览 器 里 出 现 问 题 的 风险 。 举 个 例子 , 一 个 用 作 页 
头 的 div 元 素 可 以 用 header 元 素 包 围 起 来 ， 或 者 相反 : 

<header><div id="header"></div></header> 

另外 ， 这 些 元 素 中 的 一 些 所 表达 的 语义 意义 光 从 名 字 上 看 不 太 出 来 。 举 个 例子 ，section 
就 像 div 一 样 是 一 种 块 级 元 素 ， 用 来 归 组 页 面 里 各 种 类 型 的 内 容 ， 然 而 ， 它 还 有 另 一 项 重要 功 
能 : 每 个 section 都 代表 了 页 面 “大 纲 ” 里 的 一 个 节点 。 如 果 你 把 某 个 文档 里 所 有 的 标题 和 内 
容 转 换 成 大 纲 形式 ， 那 么 每 个 section 都 会 成 为 这 个 层级 结构 里 占据 一 个 新 行 的 条 目 。 

要 了 解 这 些 元 素 的 更 多 信息 ， 我 们 推荐 AList Apart 的 这 篇 文章 : “A Preview of HTML5” 


( www.alistapart.com/articles/previewofhtml$ )。 








大 多 数 语义 元 素 的 本 意 是 描述 特定 的 内 容 部 件 ， 比 如 标题 和 段落 。 但 是 ，div 和 span 元 素 的 
定义 却 不 那么 明确 。 两 者 的 主要 用 途 都 是 在 缺乏 更 能 胜任 的 语义 元 素 时 归 组 内 容 。 

div 是 一 种 块 级 元 素 ， 通 常用 于 构建 布局 组 件 ， 比 如 页 头 、 栏 目 和 页 脚 。 它 还 可 以 用 于 构建 
缺乏 HTML 语 义 等 同 元 素 的 页 面 组 件 ， 比 如 某 个 日 历 组 件 的 结构 。 举 个 例子 ， 可 以 用 div 创 建 一 
个 多 栏 布局 ， 然 后 使 用 标题 和 段落 元 素来 组 织 某 篇 新 闻 文 章 的 内 容 结构 : 
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<div> 

<p> 我 是 一 个 位 于 div 内 部 的 块 级 段落 。</py> 
</div> 
<div> 

<h3> 文 章 标题 </h3> 

<p> 我 是 一 个 位 于 div 内 部 的 块 级 段落 。</py> 
</div> 


span 则 是 内 联 使 用 , 理想 的 用 途 是 归 组 文本 行 里 的 词组 。 内 联 元 素 只 能 包含 其 他 有 效 的 内 联 
元 素 。 


《p> 产品 策略 ，<span> 以 用 户 为 中 心 的 工作 流 设计 《</span>》>， 概 念 演示 和 UI 原型 …… </p> 





3.3.2 ”用 ID 和 类 标识 元 素 


id 和 class 属 性 可 以 应 用 在 大 多 数 HTML 元 素 上 。 类 和 ID 让 元 素 更 容易 被 CSS 和 JavaScript 找 
到 ， 同 时 还 有 其 他 一 些 有 用 的 作用 。 
一 个 ID 在 页 面 里 必须 是 唯一 的 , 也 就 是 说 它 只 能 在 单个 元 素 上 用 一 次 ,比如 页 头 、 页 脚 或 者 
特定 的 表单 控件 。ZDp 属 性 还 有 一 些 其 他 用 处 。 
> 作为 某 个 锚 链 接 的 本 地 目标 。 用 户 可 以 点 击 一 个 指向 某 个 特定 卫 的 链接 〈 以 # 开 头 : 
<a href="#table-of-contents"> 目 录 </a> ) 将 页 面 滚动 到 那个 元 素 ， 或 是 创建 一 个 书签 供 
将 来 引用 。 

> 让 元 素 之 间 形 成 一 种 有 意义 的 关系 , 比如 将 某 个 label1 元 素 连接 到 它 所 描述 的 表单 字段 上 ， 
这 样 用户 点 击 标签 就 能 让 这 个 字段 获得 焦点 。 

> 让 使 用 辅助 技术 的 用 户 能 理解 元 素 间 的 关系 ， 而 这 些 关系 可 能 只 对 视力 正常 的 用 户 来 说 
很 直观 ， 比 如 某 个 增强 版 树 形 控件 里 的 当前 活动 节点 ， 或 是 某 个 菜单 按钮 和 它 的 下 拉 菜 
单 主 体 之 间 的 关系 。 

与 ID 不 同 ， 类 用 于 标识 在 页 面 或 网 站 里 重复 出 现 的 元 素 ， 因 此 它们 可 以 很 方便 地 将 CSS 或 
JavaScript 同 时 应 用 到 多 个 元 素 上 。 除 了 应 用 增强 信息 的 功能 外 , 类 还 在 微 格式 (microformat ) 中 
用 于 描述 网 上 常见 的 标准 内 容 类 型 , 例如 某 人 的 联系 方式 或 者 某 个 活动 的 日 斯 和 地 点 。 虽然 微 格 
式 不 是 W3C 官 方 的 Web 标 准 , 但 它 已 经 吸引 了 不 少 人 , 一 些 网 站 和 浏览 器 借助 它们 的 语义 ,以 有 
趣 的 方式 连接 分 散在 网 上 各 处 的 内 容 。( 要 了 解 更 多 信息 ， 请 访问 microformats.org。 ) 

无 论 你 出 于 什么 原因 将 类 或 ID 添加 到 标记 里 ,都 建议 你 选择 能 够 准确 描述 元 素 内 容 和 用 途 的 
名 称 ， 以 便 开 发 者 理解 标记 ， 而 不 是 把 它 和 某 个 具体 的 视觉 设计 或 行为 特征 捆绑 到 一 起 。 如 果 设 
计 发 生 了 改变 , 哪怕 只 是 一 些 细 节 , 基于 设计 的 类 名 和 ID 名 就 可 能 会 迅速 变 得 毫 不 相关 而 且 令 人 
困惑 。 为 了 实现 这 个 目标 ,你 还 应 该 在 网 站 里 自始至终 使 用 一 致 的 命名 惯例 ( 比如 ,使 用 连 字符 
来 连接 单词 ), 保持 代码 的 整洁 和 可 预测 ， 从 而 简化 代码 维护 和 延伸 (假如 网 站 需要 扩展 ) 工作 。 
另外 ， 因 为 div 和 span 都 不 传达 它们 所 包含 内 容 的 语义 意义 ， 所 以 指定 描述 性 的 类 名 和 ID 名 来 清 
楚 标 明 它 们 在 代码 里 的 作用 就 显得 尤其 有 用 。 
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3.3.3 用 WAI-ARIA 路 标 角色 标识 页 面 主要 版 块 


WAI-ARIA ( Accessible Rich Internet Applications， 可 访问 富 互联 网 应 用 ) 套件 是 一 个 W3C 
规范 ， 其 中 包括 了 一 些 建 议 ， 用 来 给 动态 和 高 级 用 户 界 面 控件 所 用 的 标记 赋予 意义 。ARIA 套 件 
还 提供 了 一 些 被 称 为 路 标 角色 (landmark role ) 的 属性 ， 可 以 指派 给 基础 标记 里 的 HTML 元素 。 
路 标 能 标识 出 网 页 的 主要 版 块 : 页 头 、 页 脚 和 主要 内 容 等 。 新 版 的 屏幕 阅读 器 让 用 户 可 以 通 
过 按键 ( 比如 JAWS 上 的 分 号 键 ) 在 路 标 之 间 导 航 。 负 责 标 识 静态 内 容 版 块 的 路 标 角 色 包 括 : 

> bannei 一 一 用 于 一 个 在 网 站 里 始终 显示 的 全 局 性 页 头 ; 

做 complementary 一 一 用 于 支持 性 内 容 ， 比 如 侧 边 栏 ; 

做 contentinfo 一 一 关于 此 网 页 内 容 的 信息 ， 比 如 脚注 或 版 权 声明 ; 

> main 一 一 用 于 页 面 里 的 主要 内 容 ， 比 如 一 篇 新 闻 文 章 的 主体 部 分 ; 

> navigation 一 一 用 于 导航 链接 列表 ; 

做 search 一 一 用 于 搜索 表单 。 

可 以 使 用 role 属 性 将 路 标 指 派 给 页 面 的 某 个 部 分 : 


<ul role="navigation"> 
<1i><a href="home.html"> 首 页 </a></1i> 
<1i><a href="about.html"> 关 于 本 公司 </a></1i> 
<1Li><a href="contact.html"> 联 系 我 们 </a></1i> 
</ul> 


虽然 ARIA 是 一 个 相对 较 新 的 规范 ( 对 它 的 支持 仅 限于 新 近 版 本 的 浏览 器 和 屏幕 阅读 器 ), 但 
是 ARIA 的 属性 可 以 在 不 能 理解 它 的 浏览 器 中 安全 使 用 (它们 会 被 忽略 掉 )， 只 需要 很 少 的 工作 就 
能 在 今后 给 屏幕 阅读 器 用 户 带 来 巨大 的 好 处 ， 因 此 我 们 建议 现在 就 在 你 的 项 目 里 部 署 它 们 。( 第 
二 部 分 会 讨论 如 何 将 ARIA 属 性 指派 给 由 JavaScript 动 态 生 成 的 标记 。 ) 


3.3.4 保持 源 代码 顺序 清晰 易 读 


源 代码 顺序 指 的 就 是 将 标记 写 入 某 个 HTML 文 档 的 顺序 。 要 让 网 页 通过 验证 , 一 些 元 素 必须 
出 现在 其 他 元 素 之 前 : 举 个 例子 ，head 元 素 必 须 出 现在 body 元 素 之 前 。 但 是 ， 在 body 标 签 内 部 ， 
特定 页 面 组 件 的 代码 块 应 出 现在 标记 里 的 什么 位 置 由 开发 者 决定 。 主 内 容 栏 应 该 排 在 侧 边栏 的 前 
面 ， 还 是 相反 ? 这 很 重要 吗 ， 它 们 不 都 是 用 CSS 浮 动 到 相应 的 分 栏 里 的 吗 ? 事实 上 ， 这 对 那些 不 
依赖 视觉 线索 阅读 网 页 的 用 户 而 言 确 实 很 重要 。 标 记 的 排序 方式 可 能 会 对 他 们 造成 巨大 影响 。 

以 一 种 有 意义 的 顺序 从 上 到 下 组 织 标记 , 并 在 整个 网 站 里 贯彻 应 用 这 一 逻辑 , 这 对 使 用 不 完 
全 支持 现代 CSS 方 法 的 浏览 器 (包括 那 些 使 用 旧版 浏览 器 或 者 某 些 移动 设备 ) 以 及 类 似 屏 幕 阅读 
顺 等 辅助 技术 的 用 户 而 言 , 是 让 你 的 网 站 清晰 易 读 的 关键 。 经 过 组 织 的 标记 能 表达 内 容 层级 ， 并 
提供 一 条 清晰 的 导航 路 径 ， 而 不 统一 、 胡 乱 堆 砌 的 标记 会 阻碍 对 内 容 的 理解 和 导航 。 

依靠 CSS 来 承担 组 织 内 容 的 艰苦 工作 可 能 很 吸引 人 ， 因 为 它 提供 了 无 数 的 方式 来 调整 位 置 ， 
以 及 用 图 像 、 颜 色 和 字体 大 小 ( 仅 举 几 例 样式 特征 ) 突出 重点 内 容 。 但 是 ,编写 不 附带 CSS 的 标 
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记 能 够 确保 它 对 所 有 用 户 都 清晰 易 读 ,并 且 降 低 了 一 种 可 能 性 ， 即 虽然 网 页 看 上 去 组 织 良好 , 但 
它 的 内 部 其 实 是 一 个 让 人 困惑 的 标签 迷宫 ,为 了 保证 安全 以 及 标记 源 代码 顺序 清晰 ,请 坚持 原则 ， 
只 在 标记 的 源 代码 顺序 完整 就 位 后 才 使 用 CSS。 

来 做 个 有 趣 的 测试 ， 选 择 一 个 你 喜爱 的 网 站 ,然后 在 开发 者 工具 栏 选项 里 彻底 关闭 CSS (在 
Firefox 的 插件 Firebug 里 , 禁用 所 有 CSS 是 CSS 菜 单 里 的 一 个 选项 ), 或 者 注释 掉 你 自己 网 页 里 的 样 
式 表 引用 ， 看 看 结果 如 何 。 看 到 了 什么 ? 将 你 的 结果 与 下 述 情 况 比较 一 下 。 

> 最 重要 或 最 及 时 的 内 容 处 于 页 面 顶部 , 重要 性 较 低 的 内 容 位 置 也 较 低 , 处 于 网 页 中 线 以 下 。 

> 内 容 的 分 组 很 清楚 ， 都 有 标题 予以 标明 ， 其 后 是 相关 的 段落 。 

> 标题 正确 传达 了 内 容 的 层级 : 优先 级 越 高 ， 标 题字 体 越 大 ( 比如 hi 或 h2 元 素 )， 其 后 则 是 

优先 级 较 低 的 元 素 。 

> 链接 处 于 正确 的 上 下 文 环境 中 ( 举 个 例子 ,一 个 名 为 “更 多 ……” 的 链接 应 该 位 于 一 排 

缩减 版 链接 列表 的 末尾 )。 

> 内 构图 像 出 现在 文字 说 明之 前 。 

> 全 局 导航 元 素 在 每 张 网 页 里 都 处 于 相同 的 位 置 ， 而 且 不 会 把 主要 内 容 过 度 推 往 页 面 下 方 。 

如 果 你 的 结果 与 上 面 这 些 情况 相符 , 那么 源 代码 顺序 的 组 织 方 式 就 是 正确 且 可 访问 的 ; 如 果 
不 符 , 那些 使 用 旧式 、 移 动 或 屏幕 阅读 器 浏览 顺 的 用 户 就 可 能 无 法 理解 你 的 网 站 。 用户 的 黑 侮 手 
机 载 入 网 站 时 ,他 们 首先 应 该 看 到 优先 级 最 高 的 消息 ， 如 果 他 们 不 得 不 滚动 屏幕 才能 找到 它 , 那 
么 这 个 消息 (还 有 这 个 机 会 ) 就 可 能 会 被 错过 。 

全 局 导航 的 摆 放 位 置 和 “ 跳 过 ”链接 

在 源 代 码 顺 序 里 摆 放 全 局 导航 元 素 是 特别 需要 技巧 的 。 全 局 导航 中 的 链接 数量 是 需要 考虑 的 
一 个 重点 ， 因 此 在 选择 摆 放 全 局 导航 标记 的 位 置 时 ， 我 们 会 遵循 一 套 通用 的 规则 。 

上 如 果 导 航 链接 的 总 数量 相对 较 小 ( 包括 主 链接 和 次 级 链接 在 内 的 可 选项 共有 10~25 个 ,或 

者 更 少 )， 我 们 就 让 它 处 在 页 面 顶 部 ， 大 多 数 用 户 (甚至 包括 屏幕 阅读 器 用 户 ) 都 希望 在 







































































这 里 找到 导航 。 
上 如 果 导 航 规模 比较 大 特别 是 多 级 导航 菜单 )， 就 在 源 代码 顺序 里 把 导航 标记 放 在 内 容 
后 面 。 


网 页 顶部 一 张 非常 小 的 列表 可 以 很 容易 通过 滚屏 越过 , 如 采 提 供 了 链接 也 可 以 用 它 跳 过 。 长 
列表 则 可 能 会 把 更 有 价值 的 独特 内 容 推 向 页 面 下 方 , 因此 用 户 必须 滚屏 才能 找到 。 如 果 你 预计 用 
户 可 能 会 在 非常 小 的 移动 设备 屏幕 上 浏览 网 页 , 那 就 需要 考虑 滚动 长 长 的 选项 列表 才能 找到 好 东 
西 有 可 能 会 让 人 感觉 烦 间 ,更 糟糕 的 是 可 能 会 阻止 用 户 继续 阅读 下 去 。 

把 导航 标记 放 在 主要 内 容 区 域 之 前 还 是 之 后 都 没有 给 它们 一 个 固定 的 家 更 重要 。 如 果 导 航 在 
不 同 页 面 源 代码 顺序 里 的 位 置 不 同 , 那么 屏幕 阅读 器 用 户 就 不 得 不 重新 摸索 它 的 位 置 , 并 可 能 要 
忍受 再 次 听 读 导航 选项 的 不 便 。 

无 论 是 哪 种 情况 , 我 们 都 主张 要 采用 添加 “ 跳 过 导航 ” 销 链 接 这 一 良好 做 法 (或 者 当 导 航 在 
页 面 底 部 时 添加 “ 跳 至 导航 ”链接 ， 方 便 定位 )， 让 键盘 或 移动 用 户 向 前 跳 至 主要 内 容 ， 并 避免 
在 访问 每 一 页 时 都 要 重复 这 些 选项 。 
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在 基础 标记 的 源 代码 顺序 里 , 跳 过 链接 应 该 紧 挨 着 写 在 它 所 管控 的 内 容 之 前 , 像 这 个 重复 出 
现在 每 一 页 上 的 顶部 导航 列表 : 
<a href="#content”id="skip-navigation"> 跳 过 导航 《</a> 
<ul id="nav" role="navigation"> 
<1li><a href="home.html"> 首 页 </a></1i> 
<li><a href="products.html"> 产 品 </a></1i> 
<1Li><a href="contact.html"> 联 系 我 们 </a></1i> 
</ul> 
<div id="content"> 
《1-- 这 里 是 网 页 内 容 --> 
</div> 


这 个 链接 在 增强 体验 里 可 以 用 CSS 隐 藏 起 来 ,不 过 要 确保 以 可 访问 的 方式 隐藏 它 ， 比 如 将 它 
的 位 置 移 到 页 面 之 外 。 如 果 使 用 display 或 visibility 属 性 来 隐藏 链接 , 屏幕 阅读 器用 户 就 无 法 使 
用 它 。 

a#skip-navigation { position: absolute; left: -9999em; } 

对 于 使 用 键盘 的 视觉 用 户 来 说 , 良好 的 做 法 是 给 链接 设置 样式 , 让 它 在 获得 焦点 或 者 处 于 活 
动 状态 时 显示 出 来 ， 这 样 用 户 在 使 用 Tab 键 穿越 链接 结构 时 一 遇 到 它 就 知道 可 以 使 用 : 

a#skip-navigation:focus, 

a#skip-navigation:active { left: 0; top: 0; } 

有 些 人 可 能 认为 跳 过 链接 不 再 是 必需 的 , 因为 最 新 屏幕 阅读 器 上 的 浏览 器 能 更 好 地 利用 语义 
标记 : 它们 提供 了 各 种 机 制 让 用 户 能 通过 标题 、 列 表 和 段落 进行 导航 ， 同 时 还 采用 了 WALARIA 
规范 , 这 个 规范 指导 开发 者 用 路 标 角 色 标 识 出 页 面 中 的 主要 版 块 , 方便 用 户 从 一 个 版 块 路 到 另 一 
个 。 但 是 ， 跳 过 链接 对 “高 级 ”用 户 来 说 仍然 有 用 ， 因 为 他 们 偏爱 使 用 键盘 进行 网 站 导航 ， 而 另 
一 些 用 户 则 被 限制 只 能 使 用 键盘 导航 ， 比 如 那些 使 用 前 智能 手机 时 代 老 式 移动 设备 的 用 户 。 由 于 
缺乏 内 置 的 方法 来 跳 过 重复 的 导航 内 容 , 这 些 情形 中 的 用 户 必 须 通 过 滚屏 才能 到 达 正 确 位置 , 如 
果 屏 幕 尺 十 太 小 或 者 太 罕 就 会 让 人 难以 使 用 。 













































































3.3.5 “使 用 title 属 性 


给 元 素 应 用 可 选 的 title 属 性 是 一 种 将 意义 和 帮助 性 说 明 加 入 标记 的 简单 方法 ， 还 有 一 个 额 
外 的 好 处 : 默认 情况 下 ， 大 多 数 浏览 器 都 会 将 title 属 性 泻 染 成 工具 提示 或 者 帮助 文本 块 ， 当 用 
户 的 鼠标 悬 停 在 相应 的 元 素 上 时 就 会 显示 出 来 ， 如 图 3-4 所 示 。 一 些 屏幕 阅读 需 也 会 朗读 出 title 
的 值 。 











Email Nyess 
”To keep spammers out, we'll send a confirmation email to make sure this is a 
valid email address 























图 3-4 鼠标 悬 停 时 ， 标 签 下 方 显示 出 原生 的 浏览 器 工具 提示 
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在 基础 标记 里 ， 用 title 属 性 来 标识 元 素 ( 比如 链接 图 像 ) 是 很 有 用 的 : 


<label for="email"” title=" 为 了 阻止 垃圾 邮件 发 送 者 ， 我 们 会 发 送 一 封 确认 邮件 来 确保 这 是 个 有 效 的 Email 地 
址 ">Email 地 址 </1abel> 
<input type="text" name="user" id="email" class="text" /> 


title 属 性 可 以 应 用 到 大 多 数 元 素 上 ， 而且 它 接受 任何 长 度 的 文本 短语 , 不过， 最 好 i 上 title 
的 值 保 持 简明 扼要 , 因为 过 长 的 短语 或 者 句子 在 作为 工具 提示 显示 时 有 可 能 会 被 截 短 , 或 者 在 屏 
幕 阅读 器 阅读 时 让 用 户 的 注意 力 偏离 主要 内 容 。 

我 们 还 时 常用 这 一 功能 帮助 用 户 理解 该 如 何 使 用 某 种 增强 版 应 用 程序 界面 里 的 纯 图 标 按钮 。 
举 个 例子 ， 如果 某 张 数据 表格 里 的 行 是 可 编辑 的 ,用 户 可 以 删除 它们 , 那么 当 用 户 将 鼠标 移 到 按 
钮 上 方 时 ， 我 们 就 可 以 通过 title 属 性 以 工具 提示 的 形式 提供 操作 说 明文 字 。 

在 增强 标记 里 ,title 的 值 可 以 用 CSS 和 JavaScript 转 变 成 交互 功能 更 丰富 的 自 定义 工具 提示 ， 
甚至 可 以 在 鼠标 移 至 页 面 某 一 区 域 时 跟随 鼠标 移动 。( 第 10 章 会 介绍 一 种 方法 , 将 title 的 值 增强 
成 自 定义 样式 的 工具 提示 。) 
































注意 title 属性 可 以 用 于 link 元 素 ， 包 括 引 用 外 部 样式 表 的 链接 。 如 果 某 个 样式 表 在 页 面 里 被 
指定 为 preferred 或 alternate， 就 必须 使 用 title 属 性 给 这 个 样式 表 引 用 指定 一 个 唯一 的 
名 称 : 


<link rel="alternate stylesheet" href="styles.css" type="text/css" media="screen" title="enhanced"> 


3.4 建立 一 张 HTML 文档 


运用 上 面 介绍 的 指导 原则 , 我 们 已 经 建立 起 一 套 稳固 的 系统 , 用 于 标记 和 组 织 我 们 的 HTML， 
所 以 现在 是 时 候 将 内 容 放 入 一 张 正确 的 HTML 文 档 了 。 
HTML 文档 最 基本 的 结构 十 分 简单 ， 每 张 格式 良好 的 网 页 都 始 于 一 个 html 元 素 ， 它 包含 下 列 
额外 的 元 素 。 
> 一 个 head 元 素 ， 它 会 包含 title 元 素 和 所 有 meta 标 签 、 外 部 样式 表 和 脚本 引用 ( 随后 会 介 
绍 更 多 有 关 这 些 元 素 及 其 相关 属性 的 信息 )。 
> 一 个 body 元 素 ， 内 含 网 页 内 容 。 
从 结构 上 看 ， 它 就 像 是 这 样 : 
<html> 
<head></head> 


<body></body> 
</html> 


一 张 包含 这 种 极 精 简 结 构 的 文档 可 以 在 浏览 器 上 正常 工作 (技术 上 是 这 样 )。 但 是 , 为 了 让 
它 的 外 观 和 功能 在 各 种 浏览 器 上 保持 一 致 , 还 需要 添加 一 些 元 素来 标明 此 标记 的 语法 并 描述 这 张 
网 页 的 概况 。 
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3.4.1 DOCTYPE 

















一 个 有 效 的 DOCTYPE 声 明 是 一 个 标签 ， 应 该 出 现在 网 站 中 每 个 页 面 里 。 它 标明 了 网 页 使 用 的 
标记 语法 ， 并 引用 一 个 用 来 进行 验证 的 特定 标记 规范 。 简 单 地 说 ， 就 是 下 面 这 样 。 

> 它 指示 浏览 器 按照 兼容 标准 的 模式 运作 。 没 有 它 ， 浏 览 需 就 会 运行 于 怪异 模式 ( quirks 

mode )， 意 思 是 浏览 器 会 猜测 用 哪 种 方式 才能 最 好 地 演 染 标记 和 样式 。 

> 它 提供 了 根据 某 个 特定 标记 规范 ( 比如 XHTML 1.1 ) 来 验证 网 页 的 必要 信息 。 

为 了 能 正确 工作 ，DoCcTYPE 必 须 是 网 页 里 列 出 的 第 一 个 标签 (在 它 前 面 不 能 有 其 他 标签 ， 甚 
至 连 空格 也 不 行 )， 还 必须 遵循 某 种 特定 的 语法 。 大 多 数 D0CTYPE 必 须 包 含 一 个 对 文档 类 型 定义 
(Document Type Definition，DTD。 它 定义 了 文档 使 用 的 标记 语言 类 型 和 版 本 ) 的 引用 ， 以 及 一 
个 用 来 进行 验证 的 链接 ， 该 链接 指向 发 布 在 W3C 服 务 器 上 的 相关 DTD。 

每 种 标记 语言 都 会 指定 一 个 特有 的 D0CTYPE 标 签 。 举 个 例子 ，HTML4.0 和 XHTML 1.1 的 标签 
都 是 独一无二 的 ， 第 一 个 引号 里 的 值 是 DTD， 第 二 个 值 则 是 DTD 链 接 : 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01//EN" "http://www.w3.0org/TR/html4/strict.dtd"> 
<!DOCTYPE htm]l PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.0org/TR/xhtml11/DTD/xhtml11.dtd"> 


下 面 这 个 HTML5 的 DOCTYPE 也 是 有 效 的 ， 不 过 它 缺 少 了 DTD 和 链接 .: 

<!DOCTYPE html> 

为 什么 这 个 DOCTYPE 会 不 一 样 ? W3C 想 要 消除 标注 特定 HTML 版 本 的 必要 ， 鼓 励 开 发 者 直接 
按照 Web 标 准 编写 代码 。 采用 HTML5DOCTYPE 的 文档 会 按照 HTML5 规 范 进行 验证 , HTML5 规 范 允 
许 使 用 XHTML 的 语法 ( 比如 关闭 所 有 标签 )， 并 指示 浏览 器 用 兼容 标准 的 模式 进行 泻 染 。 























































































































为 什么 要 验证 代码 

“无 效 ”标记 指 的 就 是 不 完全 遵照 相应 规范 要 求 编写 的 标记 。 举 个 例子 ， 用 一 个 空格 和 针 
杠 关闭 某 个 图 像 标签 在 XHTML 1.1 里 是 有 效 的 ， 但 在 HTML4.0 里 则 是 无 效 的 : 

<img src="tree.gif"”alt=" 美 国 榆树 ”/> 

图 像 在 有 效 的 HTML4.0 里 是 不 关闭 的 : 

<img STC= "tree.gif”alt=" 美国 榆树 "> 

在 大 多 数 情况 下 ,无效 标记 仍然 会 被 正确 泻 染 。 事实 上 , 许多 网 站 ( 包括 那些 由 行业 领导 者 
创建 的 ) 所 使 用 的 并 不 都 是 有 效 标记 (参见 “The XHTML 100”: www.goer.org/Journal/2003/04/the_ 
Xhtml 100.html )。 

既然 无 效 标记 也 能 正常 工作 ， 那 么 验证 代码 到 底 是 为 了 什么 ?” 下面 两 个 原因 解释 了 为 什 
么 它 仍然 是 我 们 开发 实践 中 的 一 个 核心 部 分 。 

其 代码 验证 经 常会 揭露 出 标记 中 的 隐藏 问题 ， 这 些 问 题 本 来 要 很 久 以 后 才 会 显露 出 来 ， 

而 那 时 修复 它们 会 困难 得 多 。 
参 一 张 验证 过 的 网 页 遵 特 Web 标准， 因此 是 向 前 兼容 的 ( validator.w3.org/docs/why.html )。 
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3.4.2 文档 头 


一 张 HTML 网 页 的 head 部 分 预 留 给 外 部 样式 表 和 JavaScript 文 件 的 链接 , 以 及 一 些 关 于 内 容 的 
描述 性 信息 , 这 些 信息 可 能 会 帮助 你 的 网 页 更 好 地 配合 搜索 引擎 工作 。 正 确 配置 这 些 元 素 会 帮助 
你 的 网 页 更 好 地 工作 ,还 能 方便 用 户 代 理 (包括 标准 浏览 器 和 屏幕 阅读 器 ) 进行 解读 。 我 们 会 讲 
解 正确 组 织 网 页 head 会 用 到 的 最 重要 的 元 素 。 

1. 内 容 类 型 和 字符 编码 

内 容 类 型 ( 或 者 叫 MIME 类 型 ) 告 诉 浏览 器 要 准备 处 理 什么 样 的 标记 , 它 可 以 通过 在 网 页 head 
里 添加 一 个 meta 标 签 进 行 设 置 : 

<ldoctype html> 

<html> 
<head> 
<meta http-equiv="content-type" content="text/html" /> 
</head> 


<body></body> 
</html> 


还 可 以 全 局 性 设置 网 站 的 内 容 类 型 ， 方 法 是 在 服务 器 级 别 上 将 它 定 义 为 http-equiv 头 属性 。 
举 个 例子 ， 在 Apache 服 务 器 上 你 可 以 指定 一 个 .htaccess 文 件 ， 内 含 用 于 整个 网 站 的 内 容 类 型 : 
<Files abc.html> 


ForceType text/html; charset=UTF-8 
</Files> 


像 内 容 类 型 一 样 , 还 可 以 指定 字符 编码 的 类 型 , 也 就 是 浏览 圳 应 该 如 何 解释 写 在 标记 中 的 字 
符 。 举 个 例子 , 假如 你 的 内 容 用 的 主要 是 俄 文 ， 就 应 该 指定 一 个 包含 西里 尔 ( Cyrillic ) 字母 表 的 
字符 编码 。 网 页 中 最 常用 的 编码 包括 。 

> UTF-8。 它 基于 Unicode 编 码 模式 ， 向 后 兼容 ASCI， 而 且 履 盖 的 字符 范围 比 ISO-8859-1 更 
广 ， 从 西欧 语言 到 东亚 语言 都 有 。 

PP ISO-8859-1 。 它 基于 ASCII， 主 要 包括 了 西欧 字符 〈http:/en.wikipedia.org/wikiMISO/ 
IEC_8859-1 )。 如 果 文 档 的 内 容 类 型 是 text/html 但 没有 指定 编码 , ISO-8859-1 就 会 成 为 默认 
编码 ( www.w3.org/Protocols/rfc2616/rfc2616-sec3.html， 参 见 3.7.1 节 )。 

我 们 推荐 使 用 UTF-8， 因 为 它 支 持 的 语言 范围 比 ISO-8859-1 更 广 。 

可 以 在 服务 器 设置 的 同一 个 http-equiv 头 属性 里 指定 字符 编码 ， 也 可 以 在 同一 个 meta 标 签 里 

进行 文档 级 别 的 设置 : 
<ldoctype html> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
</head> 


<body></body> 
</html> 
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注意 ， 不 包括 在 指定 编码 里 的 字符 同样 可 以 写 入 网 页 标记 ,形式 可 以 是 命名 实体 (named entity )， 
比如 用 &nbsp; 代 表 不 间断 空格 ， 也 可 以 是 数字 字符 引用 (Numeric Character Reference， 
NCR )， 它 用 娠 160; 代 表 不 间断 室 格 。 
请 访问 下 列 网 站 ， 了 解 所 有 编码 参考 信息 : 
www.webstandards.org/learn/articles/askw3c/dec2002 


0 


http://en.wikipedia.org/wiki/Character encoding 


2. 网 页 标题 
客户 经 常会 问 我 们 该 如 何 改 善 他 们 网 站 在 搜索 结果 列表 里 的 位 置 ,一 个 简单 的 办 法 就 是 确保 
所 有 网 页 都 有 一 个 独一无二 的 描述 性 标题 : 


<html> 
<head> 
<title> 我 们 做 过 些 什么 : UI 设计 和 开发 客户 案例 | 马萨诸塞 州 波士顿 Filament 集 团 公司 </title> 
</head> 
<body></body> 
</html> 


每 张 网 页 都 应 该 有 一 个 独一无二 的 title 元 素来 描述 网 页 的 内 容 和 用 途 。 如 果 你 给 网 站 里 的 
每 张 网 页 都 设置 相同 的 样板 标题 ( 比如 : Acme 集 团 公 司 )， 那么 不 但 会 伤害 到 你 的 搜索 引擎 优 化 
( Search Engine Optimization ，SEO ) 排名 ， 对 访问 者 而 言 也 不 是 非常 有 用 。 撰 写 标题 时 ， 请 注意 
下 面 这 些 事 实 。 

> 浏览 器 会 将 标题 用 作 默 认 书签 名 以 及 显示 在 标签 栏 里 ， 因 此 要 让 开头 的 一 两 个 单词 尽 可 

能 地 展现 出 特征 性 。 

PP Google 或 Bing 等 搜索 引擎 将 标题 用 于 每 个 结果 的 链接 中 , 并 将 其 截 短 成 大 约 60~70 个 字 
符 的 单行 文字 (不 过 一 般 都 认为 它们 仍然 会 将 整个 标题 纳入 考虑 范围 )。 要 使 用 简洁 的 
语言 ， 并 将 最 能 具体 描述 网 页 的 单词 放 在 开头 ， 这 些 做 法 会 帮助 标题 在 搜索 列表 里 突 
显 出 来 。 

Pp 用 户头 脑 中 的 合适 网 页 标题 用 词 可 能 和 你 ( 比如 说 制造 商 ) 想 的 不 同 。 要 确保 使 用 以 顾 
客 为 中 心 的 语言 ， 符 合 你 目标 客户 的 预期 ， 而 不 是 使 用 公司 行 话 或 者 技术 名 词 。 举 个 例 
子 ， 对 一 个 产品 页 来 说 , “产品 详情 : Acme Solarfox 100B 手 提 灯 ”就 不 如 “太阳 能 手提 
式 LED 野 营 灯 - Solarfox 100B” 有 用 。 

> 如 果 你 把 你 的 名 字 (或 公司 名 称 ) 添加 到 每 张 网 页 的 标题 里 ， 请 确保 将 其 列 在 最 后 ， 着 
重 强调 那些 描述 网 页 内 容 的 文字 。 

最 后 ， 可 以 考虑 使 用 地 区 性 的 关键 词 ， 帮 助 搜索 引擎 了 解 你 所 处 的 位 置 ， 例 如 “美国 马 
萨 诸 塞 州 波士顿 ”。 但 同样 也 请 把 它们 放 在 标题 的 最 后 。 

标题 还 应 该 简明 : 不 要 仅仅 为 了 提升 网 页 访问 量 就 往 标 题 里 塞 人 不 必要 的 关键 词 。 一 些 搜索 
引擎 可 能 会 检测 到 网 页 标题 里 充斥 着 大 量 重复 或 者 多 余 的 关键 词 , 给 它们 的 排名 反而 会 更 低 , 其 
至 整个 网 站 都 会 在 搜索 结果 页 里 清除 。 总 而 言 之 , 一 个 准确 、 精 心 选择 的 网 页 标题 ( 比如 “太阳 
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能 手提 式 LED 野 营 灯 - Solarfox 100B - 美国 马萨诸塞 州 波士顿 Acme 公 司 ”) 无 论 是 对 人 还 是 搜索 
引擎 都 会 提供 更 有 用 的 信息 。 

3. 网 页 描述 和 关键 词 的 META 标 签 

关键 词 和 网 页 描述 的 meta 标 签 原 本 设计 用 于 向 搜索 引擎 提供 网 页 内 容 的 摘要 。 多 年 来 ，SEO 
营销 者 们 是 如 此 严重 地 滥用 这 些 标签 , 以 至 于 一 些 人 猜测 它们 在 搜索 引擎 排名 或 相关 性 上 不 再 占 
据 多 少 权 重 。 不 过 ,给 网 页 添加 一 组 精心 选择 的 meta 标 签 仍然 有 用 ， 因 为 它们 能 给 文档 增加 有 价 
值 的 意义 。 

网 页 描述 meta 标 签 的 内 容 有 时 会 显示 在 搜索 引擎 结果 页 或 其 他 环境 里 。 因 此 , 它 应 该 组 织 成 
一 段 关 于 网 页 用 途 的 简单 描述 。 它 应 该 用 一 两 句 话 概括 网 页 的 内 容 或 者 功能 , 并 使 用 能 补充 说 明 
网 页 标题 的 文字 , 但 这 些 文字 要 更 具 摘 述 性 和 对 话 性 。 它 也 可 以 比 标题 更 长 一 些 ,， 因 为 它 并 不 像 
后 者 那样 受 具体 字符 计数 的 限制 : 

<meta name="description”content="Solarfox 100 太阳 能 手提 式 LED 野 营 灯 ,颜色 多 样 且 完全 防水 ， 由 Acme 公 

司 在 美国 制造 。" /> 

相 比 之 下 , 关键 词 meta 标 签 则 主要 用 来 告知 搜索 引擎 蜘蛛 和 其 他 自动 化 系统 , 该 如 何 解 释 和 
评估 网 页 里 的 关键 信息 : 

<meta name="keywords”content="solarfox， 太 阳 能 ， 可 充电 ,手提 灯 ， 绿色 技术 ， 野 营 ，acme， 美 国 制 造 ， 波 

士 顿 ， 马 萨 诸 塞 州 ， 新 英格兰 ”/> 

要 以 逗号 分 隔 列表 的 形式 提供 用 户 可 能 搜索 的 那些 最 重要 的 术语 ,包括 相同 主题 的 逻辑 变 体 
( 即 太阳 能 和 可 充电 )。 与 标题 类 似 ， 如 果 你 将 列表 做 得 过 长 或 者 包含 重复 的 词汇 ,网 页 就 可 能 变 
得 腾 肿 ， 理 论 上 会 伤害 到 它 的 排名 ， 所 以 最 好 将 列表 控制 在 40 个 单词 以 内 。 

4. 语言 

语言 meta 标 签 的 作用 是 标明 HTML 网 页 使 用 的 语种 ， 并 帮助 用 户 代 理解 读 内 容 : 

<meta name="language" content="en-us" /> 

每 种 语言 都 有 一 个 代码 ， 有 时 还 会 附带 一 个 后 缀 来 区 分 特定 的 方言 (例如 用 en-us 来 指 代 美 
式 英 语 ), 语言 代码 及 其 使 用 方式 的 相关 语法 请 参 几 HTMIL 规 范 里 的 概述 (www.w3.org/TR/html401/ 
struct/dirlang.html#langcodes )。 

5. 机 器 人 

机 器 人 (robot ) meta 标 签 的 作用 是 告诉 搜索 引擎 师 蛛 该 如 何 索引 网 页 内 容 ， 以 及 是 否 可 以 跟 
踪 网 页 标记 里 列 出 的 那些 链接 。 
默认 情况 下 , 蜘蛛 会 索引 所 有 网 页 内 容 并 跟踪 一 切 链接 , 这 就 等 同 于 用 下 面 的 标签 明确 指示 
搜索 引擎 这 么 做 : 

<meta name="robots" content="all" /> 

如 果 想 告诉 某 个 机 器 人 不 要 索引 内 容 ， 应 将 content 属 性 设置 为 noindex。 要 避免 购 蛛 跟踪 链 
接 则 需要 添加 nofollow 属 性 ， 就 像 这 样 : 


<meta name="robots" content="noindex, nofollow" /> 
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要 注意 的 是 , 不 是 所 有 的 蜘蛛 都 会 遵守 你 的 机 顺 人 标签 ， 所 以 应 该 采取 混 消 (obscuring ) 或 
加 密 等 预防 措施 来 保护 敏感 内 容 ， 阻 止 那些 扫描 Email 地 址 和 敏感 信息 的 垃圾 邮件 发 送 者 和 其 他 
恶意 软件 。 

6. 样式 表 和 脚本 引用 

将 样式 规则 和 JavaScript 放 在 外 部 文件 里 ,然后 通过 head 引 用 来 组 织 和 管理 这 些 资产 是 一 种 最 
符合 标准 的 方式 ， 也 是 最 有 利于 渐进 增强 的 。 

每 张 样式 表 都 应 该 用 一 个 link 元 素 引用 ,加 上 绝对 或 相对 路 径 , 然后 放 在 所 有 meta 标 签 的 后 面 : 

<link rel="stylesheet" type="text/css" href="/styles/basic.css" /> 

默认 情况 下 , 样式 表 会 以 同样 的 方式 应 用 于 一 切 设备 和 格式 (在 设备 或 格式 允许 的 范围 内 )。 
可 以 让 它 有 针对 性 地 影响 在 PC( screen ) 或 移动 设备 ( handheld ) 上 显示 的 网 页 , 以 及 打印 (print ) 
的 网 页 ， 方法 是 指定 适当 的 media 属 性 : 

<link rel="stylesheet" type="text/css" media="print" href="/styles/print.css" /> 

JavaScript 文 件 引 用 ( 用 script 标 签 表 示 ) 原则 上 应 该 跟 在 所 有 样式 表 的 后 面 。 这样 就 确保 了 
样式 会 先 应 用 到 页 面 ， 然 后 才 是 交互 : 

<script type="text/javascript" src="/scripts/ajax.js"></script> 

7. 网 站 图 标 

建立 HTML 文 档 的 画龙点睛 之 笔 是 引用 一 个 网 站 图 标 ( 即 favicon ) 图 像 。 设置 图 标 后 ， 它 会 
出 现在 浏览 器 的 地 址 栏 、 标 签 和 收藏 夹 菜单 里 , 方便 用 户 识别 你 的 网 页 。 图 像 的 尺寸 至 少 应 该 有 
16 x 16 像 素 。 虽 然 现代 浏览 器 会 接受 任何 图 像 格 式 的 网 站 图 标 ( 包括 JPG、GIF 或 PNG ), 但 为 了 
让 它 能 出 现在 种 类 尽 可 能 多 的 浏览 咒 上 ， 建 议 使 用 传统 的 图 标 (ICO ) 格式 ， 它 的 扩展 名 是 .ico。 
只 需 像 这 样 引 用 它 : 

<link rel="shortcut icon" href="/favicon.ico" /> 

有 许多 网 页 工具 可 以 将 JPG、GIF 或 PNG 图 标 转换 成 ICO 格 式 。 我 们 用 过 下 面 这 些 , 效果 不 错 : 


P www.favicon.cce 



























































PP www.degraeve.com/favicon 
提示 “如 果 网 站 有 许多 革 果 iPhone 和 iPod touch 用 户 ， 还 可 以 创建 一 个 特殊 图 标 , 使 它 出 现在 设 


备 的 主屏 上 。 图 像 必须 是 57 x 57 像 素 大 小 、PNG 格 式 ， 文件 名 为 apple-touch-icon.png: 


<link rel="apple-touch-icon" href="/apple-touch-icon.png" /> 


3.5 ”加 入 可 访问 性 











简单 地 说 , 创建 可 访问 的 标记 就 是 指 编 写 简洁 、 组 织 良好 和 标识 清晰 的 标记 ,并 遵守 一 些 简 
单 设计 规则 , 确保 文本 易 读 、 链 接 的 自 解释 性 良好 。 按照 这 些 标准 编写 的 标记 对 屏幕 阅读 带 或 其 
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他 辅助 技术 、 搜 索引 擎 和 传统 浏览 器 用 户 而 言 都 有 更 高 的 可 用 性 ,因为 它 编 和 了 额外 的 意义 和 帮 
助 性 的 反馈 ， 两 者 都 有 助 于 提高 网 站 的 整体 可 用 性 。 这 是 一 个 所 有 人 共 启 的 选择 。 
以 下 两 组 指导 原则 概括 了 你 应 该 在 代码 中 努力 满足 的 具体 标准 ;508 条 款 ( Section 508 ) 和 
Web 内 容 可 访问 性 指南 ( Web Content Accessibility Guidelines，WCAG )。 当 你 思考 如 何 实现 完整 
可 访问 网 站 时 ， 要 将 两 者 都 考虑 在 内 ， 所 以 这 里 先 总 体 介绍 一 下 ， 然 后 再 在 后 续 章 节 里 分 析 具体 EE 
的 可 访问 性 案例 。 



































注意 ”遵循 此 处 概述 的 指导 原则 并 不 能 保证 你 的 网 站 一 定 是 可 访问 的 。 唯 一 的 确认 方式 是 将 全 
面 的 可 访问 性 测试 纳入 到 你 的 质量 保证 流程 之 中 。 


3.5.1 可 访问 性 指导 原则 和 法 律 标准 


许多 国内 和 国际 标准 描述 了 不 同 司法 机 构 在 法 律 上 可 以 接受 的 可 访问 性 措施 ， 包 括 美国 的 
“美国 残疾 人 法 案 ”( Americans with Disabilities Act，ADA ) 第 508 条 款 ， 以 及 欧盟 的 互动 媒体 指 
导 原 则 。 

这 些 规则 和 标准 适用 于 从 软件 应 用 程序 到 电信 产品 等 一 系列 信息 技术 。 举 个 例子 , 美国 ADA 
第 508 条 款 中 包括 了 许多 特别 适用 于 Web 开 发 的 标准 。 

a 每 个 非 文本 元 素 都 必须 提供 等 价 的 替代 文本 ( 即 通过 alt 属 性 提供 , 或 在 元 素 内 容 里 提供 )。 

b 任何 多 媒体 表达 方式 的 等 价 蔡 代 物 都 必须 与 该 表达 方式 保持 同步 。 

c 网 页 的 设计 必须 让 所 有 附带 颜色 的 信息 在 无 颜色 时 同样 可 用 ， 比 如 来 自 上 下 文 或 者 标记 。 

d 文档 必须 组 织 成 无 需 关 联 样式 表 仍 然 能 阅读 的 形式 。 

e 必须 为 服务 器 端 图像 映 射 (image map ) 里 的 每 个 活动 区 域 都 提供 重复 的 文字 链接 。 

f 必须 用 客户 端 图 像 映 射 取 代 服 务 器 端 图 像 映射 ， 除 非 该 区 域 无 法 通过 可 用 的 几何 形状 进 

行 定 义 。 

g 数据 表格 必须 标明 行 标题 和 列 标题 。 

h 如 果 数 据 表格 里 的 行 或 列 标题 有 两 个 或 更 多 逻辑 层级 , 则 必须 使 用 标记 关联 数据 单元 格 和 

标题 单元 格 。 

i 框架 必须 带 有 文字 标题 以 帮助 用 户 识别 框架 和 导航 。 

j】 网 页 的 设计 必须 避免 让 屏幕 以 高 于 2 Hz 有 目 低 于 55 Hz 的 频率 闪烁 。 

k 如 果 某 一 网 站 无 法 用 其 他 方式 遵守 此 部 分 里 的 条 款 , 则 必须 提供 拥有 等 价 信 息 和 功能 的 纯 

文本 网 页 。 纯 文本 网 页 里 的 内 容 必 须 与 主 网 页 同步 更 新 。 

| 网 页 使 用 脚本 语言 来 显示 内 容 或 创建 界面 元 素 时 , 该 脚本 提供 的 内 容 必 须 用 能 被 辅助 技术 

正常 读 取 的 文本 进行 标识 。 

m 一 张 网 页 要 求 客户 系统 中 存在 某 个 小 应 用 程序 ( applet )、 插 件 或 其 他 应 用 程序 来 解释 网 页 

内 容 时 ， 它 必须 提供 一 个 链接 ， 指 向 符合 $1194.21(a) 到 (1) 标 准 的 插件 或 小 应 用 程序 。 
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n 如 果 电子 表单 的 设计 要 求 在 线 完成 , 则 该 表单 必须 让 使 用 辅助 技术 的 人 能 够 访问 到 完成 和 

提交 这 一 表单 所 需 的 信息 、 字 段 元 素 和 功能 ， 包 括 所 有 的 指引 和 提示 。 

0 必须 提供 一 种 方法 ， 让 用 户 可 以 跳 过 重复 性 的 导航 链接 。 

p 如 果 要 求 限 时 应 答 ， 则 必须 警示 用 户 ， 并 给 予 其 足够 的 时 间 来 表明 自己 需要 更 多 时 间 。 

我 们 建议 我 们 的 客户 ,特别 是 那些 为 政府 机 构 或 接受 政府 资助 的 各 类 人 群 ( 比如 学 校 ) 提供 
服务 的 客户 ,理解 他 们 在 这 些 标准 下 所 承担 的 义务 。 而 且 总 的 来 说 , 我 们 建议 尽 可 能 多 地 运用 它 
们 ， 将 其 作为 良好 的 编程 实践 。 

要 了 解 508 条 款 中 的 标准 及 如 何 运用 它们 的 更 多 信息 ， 请 参见 508 条 款 的 网 站 : www.section- 
308.gov。 



































3.5.2 Web 内容 可 访问 性 指南 


Web 内 容 可 访问 性 指南 ( WCAG， 读 音 为 wh-kag ) 当前 的 版 本 是 2.0， 它 由 WCAG 工 作 小 组 创 
建 ， 经 万 维 网 联盟 审查 和 批准 。 万 维 网 联盟 本 身 是 制定 并 维护 标记 和 CSS 等 基础 规范 的 标准 组 织 。 

在 宏观 层面 上 ，WCAG 提 倡 编码 时 遵循 以 下 四 条 总 体 原 则 : 

PP 让 万 物 可 感知 ; 

> 让 万 物 可 操控 ; 

P 让 万 物 可 理解 ; 

> 让 万 物 很 健壮 。 

在 具体 实践 中 ，WCAG 规 定 了 以 下 一 些 常识 性 规则 来 实现 这 些 总 体 目 标 。 

p> 为 任何 非 文本 的 内 容 提供 蔡 代 文 本 ， 这 样 它 就 能 被 转换 成 人 们 需要 的 其 他 形式 ， 比 如 大 

字体 版 、 布 莱 叶 (了 Braille ) 盲文 、 语 音 、 符 号 或 者 更 简单 的 语言 。 

> 为 基于 时 间 的 媒体 提供 蔡 代 物 。( 基于 时 间 的 媒体 包括 预先 录制 或 现场 版 的 视频 和 音频 。) 

> 创建 可 以 用 不 同方 式 呈 现 (比如 更 简单 的 布局 ) 而 不 丢失 信息 或 结构 的 内 容 。 

p> 让 用 户 易 于 看 见 和 听 到 内 容 ， 包 括 将 前 景 和 背景 区 分 开 来 。 

> 让 键盘 可 以 实现 所 有 功能 。 

p> 给 用 户 提供 足够 多 的 时 间 来 阅读 和 使 用 内 容 。 

p> 如 果 已 知 某 种 方式 会 诱发 癫痫 ， 则 不 要 将 其 用 到 内 容 设计 中 。 

> 提供 一 些 方法 帮助 用 户 导 航 、 找 到 内 容 和 判断 所 处 位 置 。 

> 让 文本 内 容易 于 阅读 和 理解 。 

p> 让 网 页 以 可 预期 的 方式 出 现 和 运作 。 

p> 帮助 用 户 避 免 和 纠正 错误 。 

> 与 当前 和 未 来 的 用 户 代理 (包括 辅助 技术 ) 保持 最 大 程度 的 兼容 性 。 

阅读 完整 列表 ( 以 及 详细 解释 和 使 用 指导 原则 ) 请 访问 WCAG 的 网 站 : www.w3.org/TR/WCAG。 

我 们 已 经 ( 希望 如 此 ) 介绍 了 如 何 建立 一 张 结构 良好 、 能 够 驱动 基本 体验 并 为 增强 体验 打下 
基础 的 语义 化 HTML 网 页 。 接 下 来 讨论 如 何 使 用 CSS 对 渐进 增强 来 说 最 有 效 。 
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层 和 二 样式 表 (Cascading Style Sheets，CSS ) 定义 了 网 页 的 视觉 样式 ， 并 让 表现 和 内 容 能 
清楚 分 开 。 一 系列 的 高 级 字体 技巧 、 视 觉 特 效 和 复杂 布局 正 是 因为 CSS 才 成 为 可 能 。 正 确 应 用 这 
些 样式 会 极 大 提高 网 站 的 美感 和 可 用 性 。 

渐进 增强 和 现代 编程 实践 的 基本 原则 之 一 就 是 将 表现 从 标记 中 分 离 出 来 ,方法 是 将 所 有 的 样 
式 规则 组 合 到 一 个 或 多 个 外 部 样式 表 中 ,虽然 将 所 有 样式 都 写 入 外 部 样式 表 是 渐进 增强 里 必 不 可 
少 的 一 种 最 佳 实践 , 但 这 种 做 法 本 身 却 并 不 能 保证 为 所 有 用 户 提 供 令 人 满意 的 体验 。 每 一 种 浏览 
器 都 会 尝试 演 染 网 页 里 引用 的 所 有 样式 表 ， 无论 它 是 否 能 正确 支持 里 面 指定 的 CSS 属 性 。 如 果 在 
能 胜任 的 设备 里 演 染 , 样式 表 可 以 让 网 页 变 得 更 方便 阅读 , 或 让 工作 流 更 易于 执行 , 但 如 果 所 演 
染 的 浏览 器 只 能 部 分 支持 CSS， 它 就 可 能 使 体验 变 得 令 人 困惑 和 无 法 使 用 。 

使 用 渐进 增强 方式 进行 开发 时 , 我 们 在 分 离 表现 这 个 基本 原则 上 更 进 了 一 步 : 将 样式 分 离 成 
“安全 ”样式 ， 即 可 以 随 基础 标记 输出 给 所 有 浏览 器 〈 包 括 那 些 只 是 部 分 文 持 CSS 的 浏览 器 )， 然 
后 用 EnhanceJS 测 试 套件 对 浏览 器 进行 测试 ， 判 断 它 是 否 有 正确 演 染 的 能 力 ， 只 有 测试 通过 后 我 
们 才 会 加 入 更 复杂 的 样式 增强 信息 和 CSS 技 巧 。 

这 一 章 会 回顾 在 渐进 增强 里 应 用 CSS 时 经 常 采 用 的 最 佳 实践 , 包括 介绍 如 何 将 样式 分 人 基本 

和 增强 样式 表 ， 并 重点 介绍 一 些 技巧 来 改进 可 访问 性 、 可 用 性 和 样式 的 性 能 。 


4.1 将 样式 应 用 到 网 页 


许多 CSS 最 佳 实践 能 全 局 性 地 适用 于 基本 体验 和 增强 体验 。 这些 至 关 重 要 的 做 法 包括 要 组 织 
外 部 样式 表 里 的 样式 ,使 它们 能 根据 浏览 器 的 能 力 合乎 逻辑 地 区 别 应 用 ; 要 正确 引用 它们 ; 要 在 
合适 的 环境 里 做 出 明智 的 指向 ; 要 使 用 有 意义 的 命名 惯例 , 根据 用 途 或 功能 而 不 是 它们 的 视觉 特 
性 来 描述 样式 。 


4.1.1 将 样式 保存 在 外 部 样式 表 里 


保持 标记 和 样式 清楚 分 离 的 第 一 步 , 是 在 一 个 外 部 样式 表 里 引 用 所 有 样式 。 这 种 将 样式 从 标 
记 中 分 离 出 来 的 最 佳 实践 不 但 被 开发 者 广泛 采用 ， 而 且 很 重要 ， 因 为 : 
> 它 让 网 页 可 以 呈现 多 种 样式 ， 而 且 容 易 更 换 ， 因 为 它 没有 “烙印 上 ” 茶 种 特定 的 外 观 ; 
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> 它 将 所 有 的 样式 规则 保存 在 同一 个 地 方 ， 从 而 简化 了 维护 工作 ; 

> 它 通过 公用 类 和 ID 将 共享 样式 集中 到 一 起 ， 而 不 是 在 标记 里 多 次 重复 它们 ， 这 样 能 最 大 

程度 减 小 代码 体积 。 

这 种 方法 与 常用 (但 经 常会 出 问题 ) 的 实践 做 法 ， 即 内 联 写 人 样式 存在 着 根本 的 不 同 : 后 者 
可 以 用 style 属 性 给 标记 里 的 具体 元 素 指定 样式 (比如 style="padding: 5px" )， 或 者 写 在 网 页 的 
某 个 样式 块 里 。 内 联 样 式 会 带 来 许多 麻烦 。 

> 它们 无 法 被 网 页 或 网 站 里 的 多 个 元 素 重复 利用 ， 这 就 意味 着 内 联 样式 必须 在 每 一 个 需要 

它 的 地 方 都 复制 一 次 。 
> 它们 难以 维护 和 升级 ,因为 它们 内 符 于 HTML 内 容 之 中 , 而 不 是 存储 在 一 个 单独 的 外 部 位 
置 上 。 从 长 期 看 ， 这 会 成 为 让 人 头疼 的 维护 问题 ， 特 别 是 当 设计 出 现任 何 显著 变化 时 。 

> 它们 不 受 外 部 CSS 所 引用 的 样式 规则 控制 。 即 使 全 局 样式 是 在 外 部 维护 的 , 标记 里 的 内 联 

样式 规则 实例 仍然 会 覆盖 外 部 的 全 局 样式 。 

> 随 标 记 输出 的 样式 会 被 浏览 絮 泻 染 ， 哪 怕 它 们 并 不 没有 完全 得 到 支持 。 不 是 所 有 浏览 融 

都 能 以 相同 的 方式 处 理 CSS， 它 们 其 至 不 一 定 完 全 支持 所 有 的 CSS2 属 性 ， 因 此 在 某 些 情 
形 下 内 联 样式 可 能 会 导致 内 容 无 法 使 用 。 

即使 有 些 时 候 某 种 样式 在 整个 网 站 里 只 使 用 了 一 两 次 , 我 们 也 建议 将 它 列 入 外 部 样式 表 , 和 
网 站 的 其 他 所 有 样式 规则 放 在 一 起 。 

可 以 使 用 内 联 样式 的 场合 : 几 种 例外 情况 

在 高 级 UI 设计 的 几 处 非常 特殊 的 场合 里 , 我 们 发 现 有 必要 使 用 内 联 样式 : 动态 放置 屏幕 上 的 
元 素 ， 动 画 式 修改 元 素 样式 属性 ， 以 及 创建 基于 CSS 的 图 表 。 

举 个 例子 ， 如 果 你 需要 在 屏幕 上 居中 显示 一 个 模式 对 话 框 ( modal dialog ), 或 者 重复 设置 某 
个 元 素 的 透明 度 来 创造 淡出 渐变 效果 , 那么 为 每 一 个 可 能 的 位 置 坐标 组 或 动画 运动 增 量 创建 一 个 
类 是 不 切实 际 的 。 在 这 些 案例 中 ， 可 行 的 做 法 是 用 JavaScript 添 加 一 个 style， 然 后 即时 修改 CSS 
属性 。 我 们 还 使 用 内 联 尺寸 属性 创建 纯粹 基于 CSS 的 图 表 ， 方法 是 给 图 表 里 每 一 个 数值 条 的 对 应 
元 素 设置 百分比 形式 的 宽度 和 高 度 样 式 。 

话 虽 这 么 说 , 我 们 还 是 建议 尽量 避免 使 用 这 些 内 联 样式 规则 ， 只 要 有 可 能 ,请 使 用 外 部 引用 
的 CSS 来 制作 视觉 表现 。 

4.1.2 ”链接 到 外 部 样式 表 

开始 为 某 个 项 目 编写 代码 时 , 初始 工作 之 一 就 是 创建 一 张 样式 表 , 用 于 包含 基础 标记 所 需 的 
全 部 样式 规则 ， 并 在 网 页 的 head 里 引用 它 : 

<link type="text/css" rel="stylesheet" href="basic.css" /> 

有 效 的 样式 表 链 接 包括 以 下 这 些 属性 。 

> type 指 定 内 容 类 型 ， 供 服务 器 解释 ( 对 样式 表 来 说 ， 它 的 值 永远 应 该 是 text/css )。 

> rel 声 明 被 链接 资源 与 HTML 文 档 之 间 的 关系 ( stylesheet )。 
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href 包含 一 个 CSS 文 件 的 相对 或 绝对 路 径 。 

根据 HTML4 规 范 ，1link 元 素 只 有 列 人 文档 head 内 才 有 效 ， 但 是 把 它 放 在 那里 还 有 一 个 更 重 
要 的 原因 : 任何 列 人 head 的 资源 都 会 先 于 body 里 的 元 素 加 载 。 换 句 话 说， 将 link 元 素 放 在 head 里 
能 让 样式 先 就 位 ,然后 网 页 内 容 才 会 显现 ， 因 此 它们 一 出 现 就 已 经 带 着 合适 的 样式 了 。 在 网 页 的 
其 他 位 置 引 用 样式 表 增 加 了 网 页 无 样式 加 载 的 可 能 性 。 随 着 样式 的 加 载 , 用 户 会 看 到 设计 出 现 一 
步 或 多 步 的 转变 ， 而 这 往往 不 是 最 佳 的 用 户 体验 。 

还 可 以 在 一 张 网 页 里 引用 多 个 样式 表 。 这样 做 时 , 请 注意 页 面 里 引用 的 每 个 样式 表 都 会 对 服 
务 器 构成 一 次 单独 的 HTTP 请 求 ， 而 且 浏 览 带 在 显示 页 面 内 容 之 前 会 先 加 载 HTML 网 页 head 块 里 
引用 的 所 有 样式 表 。 因 此 ， 我 们 建议 把 CSS 组 织 到 一 起 ， 使 文件 的 数量 尽 可 能 少 些 。 














通过 @import 引 用 浆 大 于 利 
某 些 开发 者 偏爱 使 用 @import 标 识 来 引用 外 部 样式 表 ,， 将 它 放 在 style 标 签 或 者 别 的 样式 表 
里 ， 与 其 他 的 CSS 选 择 器 ( selector ) 并 列 。 这 个 标识 经 常 被 用 于 组 织 多 个 样式 表 以 及 管理 它们 
之 间 的 依赖 关系 。 举 个 例子 ， 只 需 在 网 页 引用 的 主 样式 表 里 加 几 条 @import 规 则 就 能 组 织 起 屏 
幕 表 现 所 需 的 全 部 样式 : 


@jimport url(screen-global.css); 
@jimport url(screen-article-formatting.css); 
@jimport url(screen-admin-tools.css); 


虽然 用 这 种 方法 组 织 CSS 文 件 看 似 很 有 效率 ,但 是 Qimport 实 际 上 可 能 会 减 慢 网 页 载 入 过 
程 。 每 一 条 @import 引 用 都 需要 浏览 器 单独 发 起 一 次 完整 的 HTTP 请 求 到 服务 器 。 另 外 ， 
@import 请 求 是 异步 进行 的 ， 就 是 说 浏览 器 不 会 等 待 这 些 请 求 加 载 完 成 后 才 开 始 泻 染 网 页 内 
容 。 这 种 方式 更 有 可 能 导致 用 户 在 网 页 开始 载 入 时 看 到 朴素 无 样式 的 HTML ， 因 为 样式 还 没 
完全 加 载 到 位 。 
因此 ， 我 们 建议 引用 样式 表 时 绕 过 这 种 方法 ， 用 link 标 签 代 替 ， 并 尽 可 能 减少 文件 数量 。 


针对 特定 媒介 类 型 
默认 情况 下 ,用 1ink 元 素 引 用 的 样式 表 会 应 用 到 所 有 媒介 形式 上 ,包括 标准 计算 机 屏幕 、 移 
动 设备 和 打印 机 。 

要 标注 某 个 样式 表 ， 让 它 只 用 于 某 种 特定 形式 ， 应 使 用 link 元 素 的 media 属 性 来 设置 一 个 或 
多 个 媒介 类 型 〈 多 个 值 之 间 用 逗号 分 隔 )。 举 个 例子 ， 这 个 样式 表 只 会 将 格式 信息 应 用 到 打印 输 
出 上 : 

<link type="text/css" rel="stylesheet" href="basic.css" media="print" /> 

还 可 以 给 一 个 样式 表 里 的 各 个 CSS 块 指定 媒介 类 型 。 要 在 一 张 用 于 多 种 媒介 形式 的 样式 表 
内 ， 对 某 个 特定 类 型 指定 一 些 例外 的 样式 ， 可 以 这 么 写 : 


@media print { 
hi { font-size: 16pt; } 
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h2 { font-size: 14pt; } 
h3 { font-size: 12pt; } 
#navigation, #advertisement { display: none; } 


HTML 规 范 列 举 了 一 些 可 供 选 择 的 媒介 类 型 ， 其 中 的 三 种 适用 于 网 站 和 应 用 程序 。 
PP screen 在 标准 计算 机 屏幕 上 的 浏览 器 里 泻 染 所 有 关联 样式 。 
> print 将 格式 信息 应 用 到 打印 机 输出 上 ， 其 布局 通常 都 设置 成 点 (point ) 和 英寸 ,尺寸 则 























经 常 根 据 纸张 大 小 而 定 。 
> handheld 将 样式 应 用 到 手持 设备 上 , 这 些 设备 拥有 低速 的 网 络 连接 、 较 小 的 屏幕 和 有 限 的 
图 形 处 理 能 














很 遗憾 ， 其 中 的 handheld 媒 介 类 型 是 最 不 可 靠 的 。 写 作 本 书 时 ,很 少 有 移动 浏览 沦 会 真正 遵 
从 这 一 媒介 类 型 ,并 以 此 解析 样式 。 要 确保 向 移动 设备 输出 合适 的 样式 , 最 好 的 办 法 是 依靠 测试 
驱动 的 渐进 增强 方式 进行 开发 ， 使 那些 网 速 和 性 能 较 低 的 设备 能 够 获得 可 用 的 体验 。 


4.1.3 使 用 有 意义 的 命名 惯例 


在 为 类 和 ID 命名 时 , 我 们 建议 使 用 能 够 描述 内 容 用 途 或 内 容 层级 角色 ( 而 不 是 其 屏幕 呈现 方 
式 ) 的 名 称 。 可 以 把 类 和 ID 看 做 语义 标记 的 延伸 一 一 名 称 是 否 准确 归 类 和 标明 了 所 包含 的 内 容 ? 

选择 有 意义 的 命名 惯例 对 渐进 增强 开发 来 说 是 一 种 最 佳 实 践 ， 原 因 有 两 个 。 
> 带 有 类 或 ID 标记 的 元 素 可 以 在 基本 和 增强 体验 里 应 用 不 同 的 样式 。 举 个 例子 ， 基 本 网 站 
里 的 一 栏 文本 在 增强 版 里 可 以 被 转换 成 模式 对 话 框 。 根 据 内 容 的 用 途 为 其 命名 会 生成 一 
个 符合 逻辑 描述 的 挂钩 ， 通 过 它 既 能 应 用 安全 和 增强 样式 ， 也 能 应 用 JavaScript 交 互 。 

p> 即使 在 同一 个 开发 周期 里 ， 视 觉 设 计 也 可 能 发 生变 化 。 举 个 例子 ， 某 个 左 侧 导航 条 可 能 
会 被 移动 到 页 面 的 顶部 或 者 右 侧 , 这 时 如 果 它 的 ID 名 是 left-nav 就 讲 不 通 了 。 更 好 的 替代 
方式 是 使 用 能 够 描述 该 导航 用 途 的 名 称 ， 比 如 primary-nav 或 者 secondary-nav。 

如 果 CSS 可 能 由 多 位 开发 者 进行 维护 或 扩展 , 那么 这 一 点 就 尤为 重要 。 作 为 一 家 专业 服务 公 
司 ， 我 们 编写 的 代码 中 有 90% 会 移交 给 客户 ， 或 者 以 开放 源 代码 的 形式 提供 给 公众 。 因 此 ,我 们 
使 用 的 命名 惯例 应 该 能 让 那些 没有 参与 初始 构建 流程 的 开发 者 理解 。 要 让 名 称 简 单 和 具有 目的 
性 ， 避 免 使 用 那些 只 有 开发 团队 成 员 才 知道 的 隐 临 缩写 词 或 者 行业 术语 。 这 样 做 ,代码 在 项 目的 
整个 生命 周期 里 就 会 变 得 更 加 健壮 。 


4.2 为 基本 和 增强 体验 添加 样式 


在 测试 驱动 的 PE ( 渐进 增强 ) 方法 里 引用 外 部 CSS 时 ,还 需要 额外 考虑 一 些 因 素 。 因 为 借助 
能 力 测试 框架 ,我 们 能 为 同一 张 网 页 提供 基本 和 增强 两 种 表现 方式 ， 所 以 需要 确定 CSS 里 的 哪些 
部 分 应 该 发 送 给 所 有 人 ， 哪 些 部 分 应 该 为 使 用 有 能 力 浏 览 需 的 用 户 保留 。 

利用 这 个 测试 框架 ,我 们 能够 非常 精确 地 划分 CSS， 然 后 分 别 输 出 给 全 部 浏览 器 ( 包括 那些 
未 通过 部 分 能 力 测试 套件 的 ) 和 那些 能 通过 所 有 测试 的 浏览 需 。 为 了 让 接 下 来 的 例子 更 明确 , 我 
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们 假设 两 种 体验 用 到 的 样式 会 分 别 储存 在 名 为 basic.css 和 enhanced.css 的 样式 表 中 。basic.css 里 包 
含 的 任何 样式 都 会 在 一 开始 输出 的 网 页 源 代码 里 引用 ,如 果 浏 览 右 通过 了 能 力 测试 , 我 们 则 同样 
会 将 enhanced.css 加 载 到 网 页 中 。( 第 6 章 会 详细 介绍 使 用 该 框架 引用 这 些 CSS 文 件 的 机 制 。) 


4.2.1 基本 体验 里 的 安全 样式 


大 多 数 浏览 器 都 有 一 个 默认 样式 表 , 这 些 默认 设置 能 很 好 地 表达 内 容 层 级 , 所 以 我 们 一 般 会 
优先 使 用 浏览 器 的 样式 表 , 并 尽量 少 用 自 定义 样式 覆盖 它 。 我们 在 运用 测试 驱动 的 PE 方法 时 发 现 
了 一 些 “ 安 全 ”的 CSS 属 性 ， 它 们 可 以 用 在 基本 体验 里 ， 所 以 通常 会 在 basic.css 样 式 表 里 设置 它 
们 。 这 些 属 性 在 各 种 浏览 器 里 的 泻 染 效果 比较 接近 ， 无 论 浏 览 需 是 新 是 旧 ， 还 是 对 CSS 支 持 程度 
不 一 都 是 如 此 。 虽 然 有 些 浏览 器 不 会 遵守 这 些 属性 ,但 即使 识别 不 出 它们 ， 也 不 会 弄 乱 网 站 。 

> 文本 格式 : 要 设置 网 站 的 默认 字体 ,你 可 以 在 body 标 签 里 “ 扒 出 ”一 列 字体 ,并 把 优先 使 

用 的 放 在 最 前 面 ( font-family: "Segoe UI"，Helvetica，Arial，san-serif )。 我 们 建议 
这 堆 字 体 里 包含 众多 系统 里 通常 都 安装 了 的 字体 。 其 他 的 文本 格式 ， 比 如 粗 体 
( font-weight: bold ) 、 和 斜体 ( font-style: italic )、 删 除 线 ( text-decoration: 
line-through )、 转 换 成 大 写 ( text-transform: uppercase )、 对 齐 ( text-align: center )、 
行距 ( line-height:1.2 ) 和 字 距 ( letter-spacing: 0.3em ) 在 绝 大 多 数 浏览 器 里 都 能 得 
到 比较 好 的 支持 。( 我 们 建议 不 要 在 基本 体验 里 设置 字体 大 小 , 或 改变 text-decoration 属 
性 来 修改 默认 的 链接 下 划 线 。) 
> 文本 颜色 和 背景 :总 体 而 言 ,文本 颜色 ( color: red ) 背景 颜色 ( background-color:#224466 ) 
和 背景 图 像 ( background-image: url(images/texture.png) ) 都 可 以 安全 地 用 在 基本 体验 里 ， 
前 提 是 文本 在 未 应 用 背景 图 像 或 背景 色 时 仍然 清晰 可 读 。 请 注意 ， 有 些 移动 浏览 器 支持 文 
本 颜色 但 不 支持 背景 颜色 ， 因 此 反 白 文本 (例如 深 色 背景 中 的 浅 色 文 本 ) 可 能 会 不 可 见 。 
另外 ， 需 要 重点 注意 的 是 ,许多 移动 浏览 器 总 是 会 将 链接 的 文字 泻 染 成 蓝 色 ， 所 以 哪怕 你 
指定 了 有 效 的 链接 颜色 ， 最 终 的 链接 文字 可 能 还 是 蓝 色 。( 如 果 背 景 是 深蓝 色 ， 链 接 也 许 
会 完全 不 可 见 。) 我 们 建议 你 遵循 一 条 经 验 法 则 : 将 反 白文 本 留 到 增强 体验 里 使 用 。 

做 内 边 距 和 外 边 距 : 内 边 距 ( padding:1em ) 和 外 边 距 ( margin-top:1.5em ) 能 够 将 元 素 分 隔 
开 ， 增 强 网 页 在 基本 体验 里 的 可 读 性 ， 但 是 使 用 次 数 应 该 严格 加 以 控制 。 永 远 不 要 在 基 
本 样式 表 里 设置 浮动 、 定 位 、 堆 著 或 溢出 属性 。 

> 边框 : 边框 ( border:1px solid black ) 可 以 适量 使 用 ， 它 能 将 用 户 的 注意 力 集中 到 各 个 
内 容 群 组 上 ， 大 大 改善 基本 体验 。 

这 些 样式 属性 结合 起 来 一 般 足 以 给 网 站 打上 简单 的 品牌 标记 , 让 它 变 得 独特 和 可 识别 , 并 增 
强 网 站 的 用 户 友好 性 。 

让 basic.css 保 持 简单 干净 还 有 另外 一 个 好 处 : 它 可 以 成 为 基本 屏幕 体验 和 打印 端 共 用 的 样式 
表 。 为 此 ， 别 忘 了 要 添加 打印 端 专用 的 @media 块 到 basic.css 中 ， 隐 藏 增强 体验 里 那些 与 打印 无 关 
的 元 素 ( 导航 、 广 告 等 ): 
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@media print { 
h1 { font-size: 16pt; } 
h2 { font-size: 14pt; } 
h3 { font-size: 12pt; } 
#navigation, #advertisement { display: none; } 


4.2.2 为 增强 体验 添加 样式 


通过 使 用 能 力 测试 , 将 增强 信息 只 发 送 给 能 够 理解 它们 的 浏览 器 , 我 们 就 可 以 放心 地 应 用 高 

级 CSS 布 局 技术 ( 比如 浮动 、 定 位 等 )， 而 不 必 担 心 它们 是 否 会 造成 可 用 性 问题 。 这 一 实践 还 允 

许 在 编写 增强 版 CSS 时 假定 JavaScript 已 存在 并 得 到 良好 支持 。 

编写 增强 版 CSS 时 遵循 许多 最 佳 实践 ， 建 议 你 考虑 一 下 。 

> 把 工作 交 给 CSS。 如 果 某 个 网 页 组 件 具 备 多 种 动态 视觉 状态 ( 比如 默认 、 高 亮 或 禁用 状 
态 )， 对 用 户 的 输入 或 操作 做 出 响应 ， 则 应 该 为 每 种 状态 编写 一 个 类 ， 用 JavaScript 切 换 它 
的 开启 和 关闭 。 这 样 CSS 就 承担 了 主要 工作 ， 从 而 避免 出 现 用 JavaScript 添 加 不 必要 的 内 

上 利用 好 样式 表 的 层 又 。 如 果 你 在 编写 基本 CSS 时 注意 适度 ， 就 能 够 方便 地 用 增强 版 CSS 扩 
展 它 , 而 不 必 去 抵消 那些 已 经 声明 过 的 样式 。 这 就 是 我 们 提倡 在 基本 体验 里 尽量 少 用 CSS 
的 原因 。 

> 少 用 重 置 样式 。 如 果 你 的 增强 版 CSS 规 则 需要 标准 化 或 者 抵消 浏览 器 的 默认 样式 ， 建 议 
把 它们 放 在 enhanced.css 的 顶部 (并 且 完 全 避免 在 basic.css 里 使 用 它们 )。 强 烈 建 议 尽 可 
能 少 重 置 样式 , 而 应 在 浏览 器 提供 的 样式 基础 之 上 进行 构建 。 这 点 对 表单 元 素 而 言 尤 其 
重要 , 因为 它们 自 带 的 某 些 特定 默认 样式 是 用 户 识别 的 依据 , 所 以 只 要 有 可 能 最 好 别 去 

磁 它 们 。 

> 如 果 可 行 ， 就 采用 前 沿 的 CSS。 许 多 较 新 的 CSS3 功 能 提供 了 丰富 的 视觉 样式 ( 例如 圆 角 、 
阴影 、 可 变 不 透明 度 和 动画 渐变 )， 并 逐步 得 到 最 新 浏览 器 的 支持 。 它 们 能 降低 代码 的 腾 
肿 程 度 ， 还 提供 了 强大 的 选择 器 ， 将 样式 规则 关联 到 标记 结构 上 。 举 个 例子 ， 如 果 使 用 
CSS3 的 border-radius 将 某 个 元 素 的 边 角 贺 化， 就 无 需 再 借助 多 个 HTML 元 素来 存放 方块 
四 角 所 需 的 背景 图 像 。 虽然 这 些 功能 有 很 多 在 IE 6 等 旧式 浏览 器 里 无 法 工作 , 但 是 在 增强 
体验 里 使 用 它们 是 安全 的 ， 因 为 不 能 识别 它们 的 浏览 器 会 忽略 它们 。 

> 用 图 像 设置 字体 要 留神 。 一 些 设计 可 能 会 用 到 没有 在 计算 机 和 设备 上 普遍 安装 的 自 定义 
字体 ,我 们 从 来 不 推荐 用 图 像 来 设置 字体 ( 哪怕 同时 还 应 用 了 可 访问 技术 , 比如 alt 属 性 )。 
有 许多 自 定 义 字 体 技巧 能 够 确保 网 页 内 容 对 所 有 用 户 (包括 那些 使 用 屏幕 阅读 器 的 用 户 ) 
都 可 用 ， 而 且 还 可 以 将 网 页 内 容 用 多 种 语言 提供 。 自 定义 字体 可 以 在 Canvas 或 Flash 中 进 
行 泻 染 ， 从 而 从 视觉 上 替换 部 分 网 页 文本 ， 而 且 许多 浏览 器 还 支持 用 CSS 的 efont-face 通 
过 URL 引 用 自 定义 字体 。 
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4.3 可 访问 性 的 考虑 要 点 


给 网 页 应 用 样式 时 , 需要 为 所 有 用 户 (包括 那些 残疾 用 户 ) 考虑 相当 多 的 可 用 性 和 可 访问 性 
项 。 

W3C 提 供 了 一 份 名 为 “Web 内 容 可 访问 性 指南 2.0”( WCAG ) 的 详尽 建议 , 它 涵盖 了 一 系列 
可 访问 性 最 佳 实践 ,包括 选择 有 意义 的 标记 ,视觉 设计 考虑 要 点 以 及 使 用 JavaScript 改 进 可 访问 性 。 
其 中 有 一 些 我 们 认为 非常 重要 ， 值 得 强调 一 下 。 

> 文字 大 小 与 缩放 : 设计 网 页 时 要 将 文字 大 小 设置 得 足够 大 ， 使 一 般 用 户 能 够 轻松 阅读 。 

用 可 变 单位 ( 例如 em 和 % ) 或 关键 词 (例如 small、medium 和 large ) 编写 的 CSS 能 方便 用 户 
根据 个 人 偏好 调整 文字 大 小 ,虽然 大 多 数 现代 浏览 絮 能 够 在 任何 CSS 单 位 下 对 网 页 内 容 进 
行 缩 放 ， 但 是 IE 6 和 之 前 版 本 只 有 使 用 可 变 单位 时 ， 文 本 缩放 才能 生效 。 
> 对 比 度 : 要 确保 广大 受众 能 够 舒服 地 阅读 文本 内 容 ，WCAG 推 荐 将 大 尺寸 文字 的 前 景 / 背 
景 对 比 度 设置 成 不 小 于 3 : 1， 小 尺寸 文字 则 是 5 : 1。( 作为 参照 ， 黑 色 文 字 在 白色 背景 
是 21 : 1， 而 hex#666 这 样 的 中 灰色 在 白色 背景 里 则 是 5.74 : 1。) 有 许多 工具 可 以 用 来 测试 
具体 的 对 比 度 ， 确 保 它 处 于 可 接受 的 水 平 。 
> 颜色 适应 性 : 许多 界面 通常 会 使 用 基于 颜色 的 视觉 提示 ， 例 如 链接 的 彩色 文字 ， 用 红 / 绿 
色 指 示 性 能 ， 以 及 高 亮 警示 信息 。 有 6%-~9% 的 人 患 有 不 同 程度 的 色盲 ， 其 中 最 常见 的 是 
红 绿 色盲 。 因 此 , 任何 视觉 指示 都 应 该 既 有 颜色 值 的 差别 ,又 有 辅助 的 视觉 指示 信息 ( 比 
如 明显 不 同 的 形状 或 图 案 )， 让 色盲 人 群 能 够 使 用 。 
> 明确 的 链接 功能 可 见 性 : 用 户 会 预期 位 于 页 面 某 些 特定 位 置 (顶部 、 沿 着 左 侧 栏 和 底部 ) 
的 文字 无 论 样 式 如 何 都 是 链接 。 对 于 页 面 主体 内 的 文字 链接 而 言 ， 重 要 的 是 要 让 它们 的 
样式 与 周围 文字 存在 足够 大 的 区 别 ， 并 可 以 考虑 始终 给 它们 加 上 下 划 线 ， 或 者 至 少 在 鼠 
标 悬 停 时 添加 ， 以 达到 最 佳 的 区 分 度 。 

> 备用 背景 色 : 给 文本 添加 背景 图 像 时 ， 请 确保 在 图 像 下 方 补充 设置 一 种 背景 色 作 为 备用 ， 
以 防 图 像 未 能 加 载 或 者 用 户 禁 用 了 图 像 。( 在 这 种 情况 下 ， 也 应 注意 上 面 介 绍 的 对 比 度 考 
虑 要 点 。) 

另外 , 我 们 自己 还 有 许多 可 访问 性 的 最 佳 实践 原则 , 在 考虑 整体 页 面 布局 和 结构 时 一 直 会 将 
它们 牢记 于 心 。 

> 考虑 屏幕 分 辨 率 : 设计 宽度 固定 的 网 页 时 ， 建 议 将 设计 宽度 限制 在 960 像 素 这 一 常用 屏幕 

分 辩 率 之 内 ， 以 确保 绝 大 多 数 用 户 无 需 横向 滚动 。 
> 呈现 舒适 的 列 宽 和 行 宽 : 大 约 80 个 字符 ( 9~10 个 单词 ) 宽 的 文本 列 阅 读 起 来 最 舒适 。 
对 那些 文字 量 超大 的 网 站 而 言 ， 我 们 会 考虑 将 列 宽 设 得 更 罕 ， 以 提高 浏览 和 阅读 的 舒 
适度 。 
> 可 能 的 话 ， 使 用 浏览 器 原生 的 焦点 样式 : 大 多 数 浏览 絮 将 焦点 处 理 成 点 状 或 发 光 的 轮廓 
线 ， 让 用 户 能 容易 地 使 用 他 们 的 键盘 在 网 页 里 导航 。 虽 然 这 种 轮廓 线 处 理 方式 有 时 会 和 
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预想 的 用 户 界面 设计 冲突 ， 但 我 们 建议 你 不 要 禁用 它 。 如 果 你 这 么 做 了 ， 请 确保 创建 出 
男 一 种 在 获得 焦点 时 出 现 的 样式 ( 比如 一 个 边框 或 者 背景 色 发 生 改 变 )， 以 向 那些 不 用 鼠 








标 进行 页 面 导航 的 用 户 提 供 明 确 的 反馈 。 


P> 遵循 既 有 惯例 :用户 经 过 网 上 无 处 不 在 的 训练 ， 已 学 会 在 特定 的 位 置 找到 常用 功能 : 例 
如 主要 导航 区 在 页 面 的 顶部 或 左 侧 ; 账户 工具 、 购 物 车 反馈 和 退出 链接 在 右上 方 ; 以 及 
用 户 帮 助 链接 在 页 面 底部 。 将 元 素 放置 在 可 预测 和 统一 的 位 置 能 帮助 用 户 高 效 地 找到 他 














们 所 需 的 内 容 。 


> 安全 地 隐藏 和 显示 内 容 : 每 次 使 用 CSS 对 视觉 用 户 隐藏 文字 时 ,请 确保 用 可 访问 的 方式 进 
行 。 使 用 display: none 或 visibility: hidden 可 能 会 让 文字 同时 对 屏幕 阅读 器 用 户 隐藏 起 
来 ， 这 就 意味 着 他 们 将 无 法 访问 该 内 容 。 一 种 可 访问 的 隐藏 解决 方案 是 将 元 素 绝对 定位 








到 页 面 之 外 , 离开 视觉 用 户 的 视野 , 方法 是 设置 一 个 很 大 的 负数 left 值 (但 不 要 设置 一 个 





top 值 , 因为 这 可 能 会 降低 可 访问 性 ), 男 一 种 解决 方案 是 给 元 素 设 置 一 个 很 大 的 负数 文本 





缩 进 值 和 一 个 隐藏 的 overflow， 将 文本 移出 视野 。 





> 尽量 避免 网 页 内 部 的 滚动 区 域 : overflow 属 性 的 作用 是 指定 内 容 溢出 容 需 边界 时 应 该 如 何 
呈现 〈 可 见 、 被 截 短 或 者 可 滚动 )。 iPhone 等 移动 浏览 天 支持 滚动 式 溢出 ， 但 不 会 显示 滚 
动 条 ， 而 且 需 要 两 根 手指 才能 深 动 这 些 区 域 ,， 这 导致 滚动 区 域 难以 使 用 。 男 一 些 则 完全 








不 支持 深 动 。 
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编写 能 在 各 种 浏览 右 中 表现 一 致 的 CSS， 通常 要 比 想象 中 难 。 兼 容 性 补丁 ( Hack ) 是 开发 者 
用 来 面向 或 排除 某 种 特定 浏览 器 的 “创造 性 ”语法 ,不 到 万 不 得 已 不 要 使 用 它们 ， 而且 即 使 用 也 
要 有 选择 地 运用 ,因为 它们 难以 维护 ,而且 在 遵循 标准 的 新 版 浏览 右 发 布 后 可 能 会 导致 演 染 问题 。 
幸好 , 如 果 你 使 用 CSS 的 方式 正确 , 兼容 性 补丁 通常 可 以 避免 。 对 那些 无 法 避免 的 有 限 情形 而 言 ， 
























































我 们 有 一 些 技巧 向 你 推荐 。 
4.4.1 条 件 注 释 





Internet Explorer 因 其 古怪 的 CSS 处 理 方 式 在 网 页 设计 师 中 声名 狼 厌 ,但 考虑 到 它 在 浏览 器 
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场 里 的 份额 , 即使 是 微小 的 泻 染 差别 也 是 难以 忽视 的 。 如 果 你 的 页 面 布局 无 论 如 何 就 是 不 能 在 某 
些 版 本 的 Internet Explorer 里 正确 演 染 ， 对 于 这 样 的 情况 不 妨 使 用 条 件 注释 。 它 是 Internet Explorer 
的 一 项 私有 功能 ,用 于 指定 哪些 HTML 标 记 只 有 正 才 能 看 到 。( 因为 它们 使 用 标准 的 HTML 注 释 语 








法 ， 所 以 其 他 浏览 絮 会 忽略 它们 。 ) 











当 有 必要 为 也 变通 使 用 CSS 时 ， 可 以 将 那些 样式 规则 单独 列 在 一 张 样式 表 里 ， 然 后 在 网 页 上 














的 条 件 注释 内 部 引用 它 : 
<!--[if IE]> 
<link rel="stylesheet" type="text/css" href="ie fixes.css" /> 
<![endif]--> 
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条 件 注释 可 针对 特定 版 本 的 契 。 我 们 总 是 建议 用 1t 指 定 一 个 版 本 , 或 是 某 个 特定 版 本 之 前 的 
所 有 版 本 ， 这 样 更 符合 标准 的 新 版 了 正 就 看 不 到 它们 了 。 举 个 例子 ， 下 面 这 个 条 件 注释 只 能 被 IE 7 
之 前 发 布 的 版 本 读 取 (就 是 说 ， 早 于 IE 7 ): 

<L--[if lt 7]> 


<link rel="stylesheet" type="text/css" href="ie fixes.css" /> 
<![endif]--> 


在 IE 专用 的 样式 表 里 编 写 CSS 时 ， 我 们 建议 做 到 以 下 几 点 。 

> 只 针对 例外 情况 :下 专用 样式 表 里 包含 的 变通 代码 数量 越 少 越 好 ， 用 来 层 亚 替换 那些 输 
出 给 所 有 浏览 器 的 样式 。 

> 少 使 用 滤 镜 : 许多 版 本 的 Internet Explorer 包 含 了 被 称 为 滤 镜 的 私有 CSS 属 性 , 它们 能 实 
现 阴影 和 模糊 等 高 级 效果 ， 还 能 让 IE 对 半 透 明 PNG 的 泻 染 得 到 修复 〈 见 接 下 来 的 补充 
内 容 )。 很 遗憾 , IE 滤 镜 不 是 合法 的 CSS, 还 可 能 会 拖 慢 网 页 性 能 。 如果 必须 要 用 的 话 ， 
请 谨慎 使 用 。 


























IE 5 和 IE 6 里 的 PNG 透 明度 


阳 7 之 前 的 版 本 并 不 原生 支持 PNG 24 图 像 中 的 alpha 透 明度 。 因 此 ，PNG 图 像 的 半 透 明 区 
域 在 IE 5 和 IE 6 里 会 表现 为 灰色 或 者 蓝 色 。 幸 好 ， 如 果 你 把 图 像 改 为 PNG 8 保存 ， 就 可 以 在 这 
些 浏览 器 里 实现 更 为 优雅 的 备用 显示 模式 , 可 以 使 用 Adobe Fireworks 或 者 网 上 一 些 基 于 命令 行 
的 免费 脚本 做 到 这 一 点 。 在 这 些 浏览 器 里 观察 PNG 8 图 像 时 ， 它 的 所 有 半 透 明 通道 会 转 为 全 透 
明 ， 在 用 户 界面 里 就 远 远 不 像 之 前 那样 碍 眼 了 。 


4.4.2 ”常见 问题 和 变通 方法 


我 们 曾经 为 种 类 繁多 的 浏览 器 创建 能 够 正常 工作 的 CSS 布 局 , 在 这 些 经 历 中 , 我 们 注意 到 有 
一 些 问题 似乎 在 每 个 项 目 里 都 会 出 现 。 通 常会 使 用 以 下 一 些 变通 方法 来 解决 它们 。 

1. 清除 和 围 住 浮动 

当 CSS 浮 动 应 用 到 某 个 元 素 后 ， 其 父 元 素 ( parent element ) 就 不 再 能 确定 它 的 高 度 了 。 这 一 
布局 行为 有 时 会 与 预期 布局 泻 染 方式 相 冲 突 , 因此 需要 寻找 一 种 变通 方法 , 让 父 元 素 围 住 它 的 浮 
动 子 元 素 。 这 个 问题 最 简单 的 解决 方法 是 让 父 元 素 浮 动 起 来 ， 或 者 将 它 的 overflow 属 性 设置 成 
auto， 但 是 这 种 方法 并 非 在 所 有 情形 下 都 适用 。 





















































注意 要 了 解 更 多 细节 ,请 参阅 Eric Meyer 的 “Containing Floats”: http://complexspiral.com/publica- 
tions/containing-floats。 


还 有 一 种 方法 ， 可 以 应 用 一 种 名 为 “清除 补丁 ”( clearfix ) 的 变通 代码 。 清 除 补丁 这 一 技巧 
的 工作 原理 是 将 一 个 元 素 插 入 最 后 浮动 的 子 元 素 之 后 ， 并 用 CSS 赋 予 它 block 和 clear 属 性 。 因 为 
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这 个 新 元 素 自 身 是 不 浮动 的 ， 所 以 它 能 让 父 元 素 确 定 它 的 位 置 并 围 住 它 。 
清除 补丁 用 到 的 CSS 非 常 巧 妙 。 它 使 用 :after 这 个 伪 元 素 选 择 器 ( pseudo-element selector ) 创 
建 一 个 元 素 ( 在 这 个 案例 里 是 单个 字符 ) 并 添加 样式 ， 不 需要 使 用 JavaScript。 只 需 将 下 列 样式 规 
则 添加 到 增强 样式 表 ， 并 将 class="clearfix" 应 用 到 某 个 元 素 ， 强 制 让 它 围 住所 有 浮动 的 子 元 素 : 
.Clearfix:after { 
content: ™ "; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden; 
} 
这 里 的 :after 选 择 器 并 没有 得 到 Internet Explorer 7 和 之 前 版 本 的 支持 ， 因 此 有 必要 添加 另 一 
种 选择 咒 ， 确 保 清 除 补 丁 技巧 能 够 正常 工作 。zoom: 1 这 个 私有 属性 会 触发 Internet Explorer 里 的 
hasLayout ( 本章 后 面 会 介绍 )， 使 该 元 素 围 住 它 的 浮动 子 元 素 。 请 记 住 ， 好 的 做 法 是 将 正 专用 的 
样式 存放 在 单独 的 样式 表 中 ， 然 后 使 用 条 件 注 释 引 用 该 样式 表 : 


/* Internet Explorer 专 用 */ 
.Clearfix { 
zoom: 1; 


} 
还 有 一 种 不 那么 碍 眼 的 替代 方式 可 以 用 来 在 整个 标记 里 指派 clearfix 类 。 可 以 在 样式 表 里 列 
出 所 有 需要 清除 补丁 样式 规则 的 元 素 ， 从 而 指定 该 规则 的 作用 范围 : 


#header:after, 
div#primary-navigation:after, 
#primary-content:after, 
#footer:after { 

content: ™ "; 

display: block; 

height: 0; 

clear: both; 

visibility: hidden; 












































/* Internet Explorer 专 用 */ 
#header, 
div#primary-navigation, 
#primary-content, 
#footer { 

zoom: 1; 


} 
这 一 改变 能 够 从 标记 里 去 除 那 些 视觉 变通 所 需要 的 类 ， 可 以 减少 网 页 体积 。 

















致 ” 谢 
用 清除 补丁 这 种 方法 来 清除 浮动 最 初 是 在 这 篇 文章 里 介绍 的 :“How To Clear Floats Without 
Structural Markup”。 这 篇 文章 出 自 Position is Everything ( www.positioniseverything.net/easyc-learing. 
html )。 
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2. 处 理 z-index 问 题 

在 现代 网 站 里 , 大 多 数 用 户 界 面 组 件 不 仅 能 够 相互 并 列 摆 放 , 而 且 还 会 堆 秋 在 其 他 元 素 的 前 
面 或 后 面 。 在 CSS 里 ， 堆 苹 是 用 z-index 属性 实现 的 。 

z-index 属性 可 以 应 用 到 任何 具有 relative、absolute 或 fixed 定 位 ( 由 position 属 性 赋值 ) 
的 元 素 上 ， 它 的 值 是 一 个 数字 ， 代 表 它 在 网 页 其 他 元 素 中 的 垂直 堆 释 位 置 。z-index 值 较 高 的 元 
素 会 出 现在 z-index 值 较 低 (或 不 存在 ) 元 素 的 前 面 。 整 个 文档 存在 着 一 种 堆 释 的 上 下 文 环境 (元 
素 相对 于 它们 在 网 页 上 的 同 级 元 素 进 行 堆 受 ), 而 且 每 个 应 用 了 z-index 属性 的 容器 元 素 都 会 为 子 
元 素 创建 一 套 新 的 堆 释 上 下 文 环境 ， 意 思 是 子 元 素 的 z-index 值 是 相对 其 他 子 元 素 ( 而 非 网 页 的 
其 余部 分 ) 而 言 的 。 

Internet Explorer 7 和 之 前 的 版 本 错误 地 解释 了 这 一 堆 著 模型 .它们 为 所 有 位 置 确定 的 元 素 都 
创建 了 一 套 新 的 堆 又 上 下 文 环境 ， 其 至 包括 那些 未 指定 z-index 的 元 素 。 这 可 能 导致 堆 芭 元 素 的 
摆 放 顺序 变 得 难以 预测 。 举 个 例子 ,一 个 相对 位 置 确 定 的 人 fieldset 元 素 内 部 绝对 位 置 确定 的 工具 
提示 ， 可 能 会 出 现在 网 页 里 其 他 确定 了 位 置 的 元 素 背 后 ， 因 为 下 将 它们 视 为 堆 秋 元素 ,而 它们 其 
实 应 该 出 现在 文档 流 里 。 

要 为 确定 了 绝对 位 置 的 元 素 解决 这 个 问题 ， 我 们 使 用 JavaScript 将 标记 【〈 在 这 个 案例 里 是 工 
具 提 示 ) 附加 到 body 元 素 未 尾 的 前 面 。 这 么 做 确保 了 工具 提示 会 处 于 文档 的 〈 而 不 是 某 个 特定 元 
素 的 ) 堆 垂 序列 中 ， 如 果 指 定 了 一 个 足够 高 的 z-index 值 ， 它 就 会 出 现在 所 有 其 他 网 页 元 素 的 前 
面 。 总而言之, 我 们 推荐 在 动态 添加 一 切 覆 盖 内 容 时 使 用 这 种 方法 ,因为 这 样 就 无 需 再 猜测 应 该 
将 某 个 元 素 插 入 到 哪 一 层 ， 才 能 正确 合 加 到 所 有 其 他 网 页 内 容 的 上 方 。 

Internet Explorer 的 男 一 个 z-index 问题 是 ，select、iframe、object ( 用 于 Adobe Flash 等 插件 ) 
等 “窗口 化 ”( windowed ) 元 素 以 及 任何 有 滚动 条 的 元 素 都 倾向 于 堆 释 在 其 他 所 有 元 素 前 面 ， 不 
管 源 代码 顺序 或 者 z-index 值 如 何 都 是 如 此 。 可 惜 ， 这 个 问题 的 变通 方法 不 太美 观 : 我 们 使 用 
JavaScript 和 CSS 直 接 将 一 个 隐藏 的 空白 iframe 元 素 , 插入 到 想 出 现在 网 页 其 余部 分 前 面 的 内 容 之 
后 ， 让 它 的 尺寸 大 到 足够 成 为 一 堵 墙 ， 挡 住 窗口 化 内 容 ， 不 让 它们 透 过 来 。 



































































































































提示 要 以 自动 化 的 方式 使 用 这 个 补丁 , 我 们 推荐 使 用 jQuery 的 插件 bgiframe ( http://docs.jquery. 
com/Plugins/bgiframe )。 


3. 修复 Internet Explorer 里 的 hasLayout 问 题 

在 Internet Explorer 里 测试 CSS 布 局 时 ， 你 必定 会 遇 到 看 似 随 机 的 泻 染 bug: 元 素 只 有 部 分 可 
见 ， 行 为 不 遵守 样式 规则 ， 滚 动 时 出 现 闪 烁 ， 或 者 在 意料 之 外 的 网 页 位 置 上 显示 出 文字 碎片 。 

这 些 类 型 的 bug 通 常 是 由 正 泻 染 引擎 自身 的 问题 所 造成 的 ， 常 见 原 因 是 某 个 元 素 缺 少 被 微软 
公司 称 为 hasLayout 的 一 种 特性 。hasLayout 确 切 含义 的 细节 还 不 太 为 人 所 知 。 总 体 来 说 ， 块 级 元 
素 在 IE 的 演 染 引擎 里 被 当做 是 具有 hasLayout, 但 有 时 引擎 会 忘记 将 hasLayout 应 用 到 这 些 元 素 上 。 

有 一 些 CSS 属 性 可 以 应 用 到 元 素 上 触发 hasLayout。 
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> position: relative; 这 个 属性 通常 是 最 安全 的 hasLayout 变 通 方 法 ， 我 们 一 般 会 首先 尝 
试 它 。 
> zoom: 1; 这 个 CSS 属 性 是 私有 且 无 效 的 , 但 没有 多 大 危害 ， 它 赋予 某 个 元 素 100% 的 页 面 缩 
放 级 别 ， 以 默认 的 样子 演 染 它 。 
> height: 1%; 或 者 就 这 个 问题 而 言 任何 height 设 置 都 行 ， 它 通常 能 触发 hasLayout。 
要 确保 对 标准 支持 更 完善 的 未 来 版 本 浏览 絮 看 不 到 这 些 样式 ， 你 可 以 考虑 将 hasLayout 样 式 
补丁 放 在 下 专用 的 样式 表 里 ， 这 些 样式 表 只 针对 需要 这 一 补丁 的 特定 版 本 Internet Explorer。 
我 们 介绍 了 如 何 有 效 地 编写 和 组 织 你 的 样式 , 使 它们 能 清楚 地 针对 基本 和 增强 体验 。 接 下 来 
讨论 如 何 通 过 无 颖 插入 JavaScript 来 转换 基础 标记 ， 从 而 增强 页 面 并 添加 交互 性 。 
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从 最 开始 的 地 位 低下 ,经 常 被 误 认 为 是 一 种 古怪 的 “玩具 ”语言 ， 到 如 今 成 为 世界 上 使 用 最 
为 广泛 的 编程 语言 之 一 , JavaScript 在 短 短 的 时 间 内 经 历 了 一 段 漫长 的 旅程 。 今 天 的 浏览 器 构建 在 
强大 的 处 理 引擎 基础 之 上 , 这 样 我 们 就 能 用 JavaScript 创 建 媲美 桌面 端 程序 的 丰富 体验 , 而 且 执 行 
速度 和 能 力 正 在 快速 提升 。 
通过 使 用 测试 驱动 的 渐进 增强 方法 ， 我 们 能 以 一 ee 用 JavaScript， 不 仅 

力 增 强 基 础 标记 , 创建 用 户 想 要 的 高 交互 性 网 络 应 用 程序 , 还 能 确保 照顾 到 了 缺乏 JavaScript 
支持 的 洲 览 器 上 的 可 访问 性 。 

这 一 章 会 讨论 如 何 无 颖 应 用 JavaScript 来 扩展 一 张 网 页 的 功能 ， 同 时 维持 甚至 增强 它 的 的 可 
访问 性 。 我 们 会 从 4 个 基本 方面 考虑 JavaScript 的 开发 : 

BP 应 用 JavaScript 到 HTML ; 

> 理解 JavaScript 在 基本 体验 里 的 位 置 ; 

> 编写 增强 体验 脚本 ; 

> 保持 和 增强 可 用 性 与 可 访问 性 。 

在 这 一 过 程 中 ， 我 们 会 详细 介绍 无 颖 组 织 JavaScript 的 方法 ， 并 尽 可 能 将 它 编写 得 通用 些 ， 
这 样 就 可 以 在 不 同 环境 里 重复 使 用 。 


5.1 如 何 正 确 引 用 JavaScript 


将 JavaScript 驱 动 的 行为 与 HTML 标 记分 离 ， 对 实现 渐进 增强 而 言 是 一 种 至 关 重 要 的 最 佳 实 
践 。 清 楚 的 分 离 能 让 脚本 增强 信息 针对 有 能 力 的 浏览 器 。 用 PE 方法 编写 代码 时 应 该 无 颖 应 用 
JavaScript， 方 法 是 将 它 放 进 某 个 外 部 文件 里 ， 然后 在 网 页 的 head 里 引用 它 。 
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5.1.1 避免 内 联 JavaScript 


经 常 能 见 到 内 联 的 JavaScript 代 码 块 甚至 事件 处 理 程序 ( 比如 onclick 或 者 onmouseover 等 标 

记 ) 添加 到 HTML 标 记 里 。 内 联 JavaScript 可 能 看 上 去 像 是 一 种 添加 交互 性 的 简便 方法 , 但 是 一 些 
重要 的 理由 证 明 使 用 这 种 方法 不 是 一 个 好 主意 。 

> 它 增 加 了 代码 体积 。 事 件 被 内 联 使 用 时 ， 它 们 必须 重复 出 现在 标记 里 的 每 一 个 单独 元 素 
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上 ， 这 让 网 页 的 文件 大 小 变 得 爱 肿 ， 拖 慢 了 加 载 时 间 。 

> 它 增 加 了 维护 的 复杂 性 。 维 护 内 联 脚本 需要 你 细致 地 注 明 各 个 事件 实例 分 别 写 在 标记 里 
的 哪个 位 置 ， 然 后 广 苦 地 寻找 并 更 新 每 一 个 直接 将 JavaScript 内 租 到 HITML 文 档 内 容 里 的 
实例 。 如 果 你 忽略 了 某 些 单独 的 实例 ， 它 们 就 可 能 导致 错误 。 

> 它 在 所 有 支持 JavaScript 的 浏览 器 里 都 应 用 了 行为 ， 包 括 那 些 支持 程度 不 佳 的 浏览 器 。 如 
果 某 些 脚 本 技巧 不 能 正常 工作 ， 一 些 用 户 就 可 能 体验 到 错误 和 可 访问 性 问题 。 

幸好 ， 在 绝 大 多 数 情 况 下 ， 内 联 脚本 是 完全 可 以 避免 的 。JavaScript 提 供 了 原生 的 方法 来 遍 

历 某 个 文档 的 标记 结构 ， 无 须 添加 属性 或 编辑 标记 就 能 应 用 事件 。 























5.1.2 引用 外 部 JavaScript 


在 HTML 里 构建 和 应 用 格式 良好 的 脚本 文件 引用 很 容易 ， 只 需 在 HTML 文 档 的 head 里 为 每 个 
文件 添加 一 个 脚本 元 素 ， 并 将 它 的 src 属 性 设置 成 外 部 JavaScript 文 件 的 路 径 即 可 : 

«script src="js/enhancements.js" type="text/javascript"></script> 

type 属 性 也 是 说 明文 件 内 容 类 型 ( 在 这 个 案例 中 是 text/javascript ) 所 必需 的 , 让 服务 器 能 
够 正确 解释 它 。 

开发 社区 对 脚本 文件 最 佳 的 输出 位 置 存在 着 争议 : 它 应 该 像 HTML4 规 范 里 那样 放 在 head 元 
素 里 ， 与 CSS 引 用 并 存 ， 还 是 应 该 放 在 文档 末尾 ， 让 网 页 内 容 能 够 首先 加 载 ? 

从 我 们 的 角度 看 , 这 些 都 不 是 关键 问题 。 在 用 渐进 增强 方法 编写 代码 时 ,引用 外 部 脚本 最 重 
要 的 问题 不 是 把 它们 放 在 哪里 ， 而 是 何 时 引入 它们 。 脚 本 文件 应 该 在 确定 浏览 器 能 正确 演 染 它们 
后 才 载 入 网 页 。 要 确定 哪个 脚本 文件 能 在 某 种 设备 上 正常 工作 , 必须 在 浏览 需 加 载 它 们 之 前 测试 
这 些 脚本 ， 然 后 只 输出 能 够 通过 测试 的 脚本 增强 信息 。( 下 一 章 会 详细 描述 如 何 用 这 种 方式 加 载 
脚本 。 ) 


5.2 理解 JavaScript 在 基本 体验 里 的 位 置 


第 4 章 列 举 了 一 些 我 们 推荐 的 “安全 ”CSS 属 性 ， 用 它们 可 以 对 网 页 的 基本 体验 进行 细微 的 
视觉 性 改善 ， 而 且 不 存在 引入 可 用 性 问题 的 风险 。 

但 是 ， 对 于 JavaScript 来 说 ， 这 样 的 列表 并 不 存在 。 当 JavaScript 遇 到 某 个 问题 时 ( 无论 是 因 
为 浏览 器 支持 不 足 还 是 开发 者 使 用 的 逻辑 有 缺陷 )， 它 倾向 于 “ 侠 ” 地 一 声 报错 ， 无 论 错误 的 严 
重 程度 如 何 都 将 它 呈 现 给 用 户 。 更 糟糕 的 是 ，JavaScript 错 误 可 能 会 停止 进程 的 运行 , 让 网 页 停留 
在 部 分 增强 或 者 完全 不 可 用 的 状态 。 

因此 ， 我 们 建议 在 基础 标记 里 包含 一 条 JavaScript 引 用 : 运行 能 力 测试 套件 所 需 最 低 限 度 的 
JavaScript。 我 们 总 是 用 标准 HIML 静态 元 素 和 表单 控件 创建 基本 体验 ( 基础 标记 和 安全 样式 ), 构建 
一 个 无 须 附带 任何 JavaScript 事 件 也 能 在 各 种 设备 上 运作 的 可 用 界面 。 如 果 (而且 只 有 ) 浏览 器 通过 
了 增强 体验 要 求 的 全 部 能 力 测 试 ， 我 们 才 会 使 用 EnhanceJS 载 和 人 额外 的 JavaScript， 插 人 增强 信息 。 

































































































































































全 








5.3 ”脚本 增强 的 最 佳 实践 85 





5.3 脚本 增强 的 最 佳 实 践 


用 JavaScript 增 强 网 页 的 方式 有 很 多 ， 从 简单 的 内 容 显 示 / 隐 藏 切换 ， 到 完全 改变 用 户 体 验 的 
复杂 转换 不 等 。 这 一 方 会 演示 一 些 最 佳 实践 : 使 用 渐进 增强 将 JavaScript 应 用 到 网 页 ,以 及 给 网 页 
现 有 内 容 添加 增强 行为 ， 生 成 或 请 求 新 的 标记 ， 应 用 增强 样式 和 管理 内 容 可 视 性 。 


5.3.1 在 内 容 就 绪 时 运行 脚本 


和 CSS 不 同 ，JavaScript 要 求 它 操作 的 HTML 元 素 在 脚本 执行 时 就 已 存在 。 如 果 某 个 所 需 的 元 
素 对 脚本 不 可 用 , 浏览 器 就 会 提示 出 错 。 要 避免 发 生 这 种 情况 ,JavaScript 必 须 推迟 运行 ,直到 标 
记 加 载 完 成 。 

JavaScript 原 生 的 onload 事 件 处 理 程序 , 在 它 的 关联 元 素 包含 的 所 有 内 容 ( 包括 图 像 和 iframe 
等 所 有 附属 品 ) 都 加 载 完 毕 后 会 触发 。 在 onload 事 件 处 理 程序 里 添加 一 段 肢 本， 可 以 确保 它 作 用 
的 元 素 在 脚本 运行 前 都 已 加 载 完毕 并 准备 就 绪 : 

document .body.onload = function(){ 


// 对 body 里 的 内 容 进行 操作 


在 许多 情况 下 ， 只 要 有 了 HTML 标 记 ， 即 使 全 部 网 页 资源 ( 图 像 、iframe 等 ) 尚未 加 载 完成 ， 
脚本 也 能 安全 运行 。 没 有 任何 一 种 原生 的 JavaScript 方 法 能 在 当前 所 有 浏览 器 里 正常 工作 , 不 过 流 
行 的 JavaScript 库 提供 了 自 定 义 事件 处 理 程序 ( 例如 jQuery 的 ready 方 法 )， 基 本 标记 结构 就 位 后 可 
以 立即 执行 某 个 脚本 : 

$(document).ready(function(){ 


// DOM 相 关 的 代码 放 在 这 里 | 
}); 






































5.3.2 ”给 标记 应 用 行为 


在 增强 体验 里 ，JavaScript 控 制 的 主要 活动 之 一 是 无 颖 应 用 行为 来 对 用 户 的 交互 作出 反应 。 
有 两 种 方式 可 以 将 JavaScript 事 件 处 理 程序 连接 或 绑 定 到 增强 标记 上 。 
上 事件 绑 定 (event binding ) 能 将 鼠标 点 击 或 者 按键 等 事件 处 理 程 序 应 用 到 网 页 里 的 特定 元 
素 上 。 
> 事件 指派 (event delegation ) 利用 了 JavaScript 的 事件 反 升 (eventbubbling ) 功能 ， 将 事件 
监听 融 应 用 到 父 级 容器 上 ， 而 不 是 将 人 处理 程序 直接 绑 定 到 各 个 单独 的 元 素 上 。 
1. 使 用 事件 绑 定 
JavaScript 是 一 种 事件 驱动 的 语言 ， 意 思 是 它 既 可 以 在 载 和 人 时 执行 ， 也 可 以 “监听 ” 某 个 事 
件 ， 在 晚 些 时 候 才 触发 它 。JavaScript 的 事件 对 应 环境 活动 (例如 1oad 和 error ) 和 用 户 活 动 〈 例 


如 mousedown 、mouseup 、click、mouseover 、mouseout 和 keypress 等 )。 
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JavaScript 的 事件 处 理 程序 是 给 网 页 元 素 应 用 行为 的 内 建 方法 。 使 用 事件 处 理 程序 将 行为 绑 
定 到 元 素 上 时 , 该 行为 的 执行 会 被 推迟 , 直到 事件 发 生 。JavaScript 的 事件 监听 能 力 是 构建 智能 
响应 灵敏 的 网 络 应 用 程序 过 程 中 的 一 个 主要 因素 。 

举 个 例子 ， 下 面 的 代码 展示 了 如 何 通过 id 找到 某 个 锚 元 素 ， 然 后 将 它 和 click 事 件 处 理 程序 
绑 定 : 

var myAnchor = document .getElementById( myAnchor ' ); 

myAnchor.onclick = function(){ 

ea 

但 是 , 用 这 种 方式 绑 定 事件 监听 器 会 覆盖 之 前 应 用 到 该 元 素 相同 事件 上 的 所 有 监听 器 。 要 以 
不 覆盖 其 他 监听 器 的 方式 添加 事件 监听 器 ，W3C 的 第 2 级 DOM (DOM Level 2 ) 事件 模型 列 出 了 
addEventListener 方 法 。Internet Explorer 采 用 了 自己 的 事件 绑 定 方法 attachEvent ， 这 就 意味 着 添 
加 事件 监听 器 的 跨 浏 览 器 解决 方案 需要 检查 并 使 用 受 支 持 的 方法 。 

为 了 简化 对 多 个 事件 监听 器 的 绑 定 , 一 些 JavaScript 库 提供 了 自 定义 方法 , 例如 jQuery 的 自 定 
义 bind 方 法 。 这 些 库 还 提供 了 选择 器 引擎 ， 让 开发 者 可 以 用 CSS 样 式 的 语法 找到 元 素 ， 使 得 通过 
ID 、 类 名 或 任何 CSS 选 择 器 绑 定 事件 变 得 简单 。 下 面 的 代码 演示 了 一 个 接受 两 个 参数 的 bind 方 法 : 
一 个 参数 是 事件 名 称 〈 在 这 个 案例 里 是 click， 但 它 也 可 以 接受 其 他 事件 名 称 ， 比 如 mouseover 和 
mouseout 等 ， 甚 至 可 以 接受 多 个 事件 )， 另 一 个 是 事件 触发 时 要 执行 的 回调 函数 ; 

$('#myAnchor').bind('click', function(){ 


// 放 在 这 里 的 JavaScript 会 在 myAnchor 被 点 击 时 执行 
)); 


jQuery bind 方 法 回调 函数 的 执行 范围 ， 是 在 与 事件 绑 定 的 DOM 元 素 之 内 ， 这 样 就 可 以 使 用 
JavaScript 关 键 词 this 指 代 该 元 素 。 举 个 例子 ， 点 击 某 个 元 素 时 ， 它 的 class 属 性 可 以 使 用 this 关 
键 词 进 行 修改 : 

$('#myAnchor').bind('click', function(){ 


this.className = "clicked"; 


有 

2. 使 用 事件 指派 

将 事件 直接 绑 定 到 元 素 上 很 有 用 , 但 是 当 你 创建 复杂 的 应 用 程序 , 需要 让 许多 元 素 表现 出 类 
似 的 行为 时 ， 更 有 效率 和 易于 管控 的 方式 是 使 用 事件 指派 来 分 配 事件 。 

事件 指派 的 一 个 优点 是 ， 绑 定 到 某 个 父 元 素 上 的 事件 会 自动 将 行为 应 用 到 子 元 素 上 ， 哪 怕 它 
们 当时 还 没有 出 现在 网 页 上 。 这 就 使 它 成 为 了 一 种 特别 有 用 的 技巧 ， 适 用 于 在 组 件 创建 后 再 添加 
标记 的 网 页 里 使 用 脚本 增强 信息 。 男 外 ， 事 件 指派 应 用 事件 的 速度 很 快 ， 内 存 使 用 效率 也 很 高 : 
相对 于 遍历 某 棵 树 上 的 每 个 节点 来 绑 定 单独 的 事件 ,所 有 程序 逻辑 可 以 一 次 性 指派 到 父 级 元 素 上 。 

事件 有 自己 的 原生 属性 ， 例 如 pageX 和 pageY ( 表示 鼠标 坐标 ) 以 及 target (表示 触发 事件 的 
那个 元 素 )，jQuery 赋 予 了 这 些 属性 跨 浏览 器 的 通用 名 称 。target 属 性 特别 适用 于 应 用 事件 指派 ， 
因为 用 它 可 以 找到 是 哪个 元 素 触发 了 某 个 事件 。 
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事件 指派 指 的 是 将 某 个 事件 绑 定 到 父 级 元 素 〈 比如 组 件 容器 或 者 body 元 素 ) 这 类 操作 。 骸 套 
在 父 元 素 内 的 某 个 子 元 素 触 发 了 某 个 事件 时 , 该 事件 会 “ 反 升 ” 到 父 节 点 并 触发 一 段 脚本 ， 此 脚 
本 执行 时 会 检查 该 事件 的 target 是 哪个 元 素 ， 如 果 此 target 与 我 们 想 要 的 元 素 匹 配 ， 对 应 的 脚本 
就 开始 运行 。 

传递 到 某 个 事件 处 理 器 回调 函数 的 第 一 个 参数 引用 的 是 它 的 event 对 象 ， 内 含 该 事件 的 所 有 
属性 。 下 面 的 代码 展示 了 绑 定 到 body 元 素 的 一 个 事件 ,里 面包 含 了 条 件 逻 辑 ， 用 于 检查 点 击 的 对 
象 是 否 是 一 个 锚 元 素 : 


$('body').bind('click', function(event){ 
if ($(event.target).is('a')){ 
// 某 个 锚 元 素 被 点 击 了 1! 
} 
}); 


jQuery 通过 它 的 1ive 方 法 进一步 简化 了 事件 指派 ， 让 它 变 得 自动 化 ,原理 是 将 事件 应 用 到 文 
档 本 身 ， 然 后 检查 事件 的 target， 看 它 与 live 方 法 应 用 到 的 元 素 是 否 匹 配 : 


$('#myAnchor').live('click', function(){ 
this.className = "clicked"; 


}); 









































5.3.3 用 JavaScript 构 建 增强 标记 


用 JavaScript 创 建 额外 的 HTML 并 将 其 搬入 到 增强 体验 里 通常 是 必 不 可 少 的 。 举 个 例子 , 基本 
体验 里 的 下 拉 菜 单 可 能 会 在 增强 体验 里 被 转变 成 一 个 滑 块 ,因为 这 个 滑 块 的 标记 离 不 开 JavaScript 
行为 ,而 且 只 会 给 基础 标记 带 来 额外 的 带宽 消耗 和 代码 复杂 度 , 所 以 它 不 应 该 包括 在 基础 标记 中 。 
相反 ,这些 新 的 滑 块 标记 必须 在 增强 过 程 中 插入 。 

增强 专用 的 标记 有 两 个 来 源 : 它 既 可 以 由 JavaScript 根 据 从 基础 标记 里 获得 的 信息 生成 ， 也 
可 以 通过 Ajax 请 求 从 服务 器 上 获取 。 

1. 使 用 基础 标记 作为 生成 增强 标记 的 向 导 

只 要 有 可 能 ， 用 基本 的 基础 标记 作为 参照 生成 增强 标记 是 一 种 良好 的 实践 。 

举 个 例子 ,想象 一 下 你 要 从 基础 标记 里 的 某 个 原生 HTML select 元 素 创 建 出 一 个 滑 块 。 我 
们 可 以 用 JavaScript 来 解析 每 个 option 元 素 里 的 文本 , 并 找到 原生 select 里 当前 选中 的 是 哪个 选 
项 。 用 这 些 数据 ， 可 以 在 脚本 里 生成 一 个 通用 的 滑 块 标记 “模板 ”， 然 后 将 生成 的 增强 标记 插 
和 人 网页, 动态 生成 内 容 相 比 用 Ajax 请 求 额外 内 容 要 快 得 多 , 因为 一 切 都 是 网 页 里 现成 的 。 另 外 ， 
通过 编写 通用 的 脚本 ， 让 它 将 基础 标记 作为 数据 源 来 生成 模板 〈 而 不 是 将 内 容 和 能 人 脚本 )， 就 
可 以 对 网 站 里 许多 不 同 的 滑 块 使 用 同一 种 脚本 逻辑 。( 第 12 章 和 第 17 章 会 详细 展示 这 一 技巧 的 
两 个 范例 。) 

在 某 些 情况 下 ， 我 们 会 选择 在 基础 标记 里 编码 数据 ， 这 样 增强 脚本 就 能 利用 它 。 举 个 例子 ， 
用 于 生成 工具 提示 的 外 部 内 容 的 位 置 可 以 编码 到 data 属 性 ， 增 强 脚 本 会 用 它 生成 一 个 Ajax 请 求 。 
HTMLS 里 的 data 前 绥 可 以 添加 到 任何 字 串 前 面 ， 从 而 创建 出 符合 Web 标 准 的 自 定义 属性 。 
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极 少 数 情况 下 , 在 脚本 里 存放 一 小 段 内 容 片段 或 者 标记 的 确 是 最 佳 做 法 。 举 个 例子 ,请 考虑 
某 个 对 话 框 标题 栏 上 “关闭 ”按钮 所 用 的 文字 。 虽然 该 对 话 框 的 主要 内 容 可 以 来 自 于 基础 标记 或 
者 从 服务 器 请 求 到 的 一 份 单独 文件 , 但 它 的 标题 栏 控 件 和 “关闭 ”按钮 存在 的 原因 只 是 为 了 使 用 
对 话 框 本 身 。 基 础 标记 里 没有 这 些 内 容 的 位 置 , 而 且 从 性 能 的 角度 看 ,向 服务 器 发 送 一 个 请 求 仅 
仅 为 了 获取 这 两 个 字 ， 这 是 非常 低 效 的 。 在 这 样 的 特定 情形 中 ， 我 们 相信 把 内 容 放 进 JavaScript 
说 得 通 。 这 样 做 时 , 我 们 会 小 心地 将 这 段 文字 存放 在 一 个 可 配置 的 JavaScript 变 量 里 , 并 在 方便 的 
位 置 定 义 这些 变 量 ， 比 如 JavaScript 文 件 的 顶部 。 
2. 用 Ajax 请 求 额外 内 容 
某 些 情况 下 , 用 Ajax 给 网 页 添加 额外 的 标记 比 在 基础 标记 里 保存 要 更 为 合理 , 原因 有 网 页 尺 
才 限 制 或 速度 优化 目的 ， 避 免 额 外 的 标记 弄 乱 基本 体验 ， 或 者 其 他 商业 理由 。 
Ajax 这 种 技术 一 开始 是 Internet Explorer 5$ 的 一 项 私有 功能 ， 之 后 被 采纳 成 为 Web 标 准 ， 集 成 
进 了 大 多 数 现代 浏览 器 中 。 它 让 JavaScript 从 服务 器 请 求 数 据 来 更 新 部 分 网 页 , 而 不 必 非 得 重新 载 
人 整 张 网 页 。 
用 Ajax 从 服务 器 请 求 内 容 是 一 个 直观 的 过 程 : 某 个 脚本 发 送 一 个 对 HTML 特定 片段 的 请 求 到 
服务 器 ; 服务 器 返回 一 段 响应 文本 ,可 以 是 纯 文本 、XML、JavaScript (JSON ) 或 者 HTML 格 式 ; 
脚本 将 文本 插入 到 网 页 中 。 
jQuery 提供 了 几 种 实现 Ajax 功 能 的 方法 ， 如 下 所 示 。 
PP ajax 方法 。 它 是 最 为 健壮 的 ， 提 供 了 一 个 对 应 浏览 器 XMLHttpRequest API 的 标准 化 接口 ， 
还 有 多 种 jQuery 独 有 的 事件 和 属性 。 

戎 get 和 post 方 法 。 它 们 提供 了 实现 ajax 方法 的 快捷 方式 ， 用 更 简洁 的 配置 生成 请 求 。 

做 1oad 方 法 。 它 类 似 于 get， 不 过 你 会 在 某 个 DOM 元 素 上 调用 它 ， 意 图 是 让 返回 的 内 容 插 人 
到 该 元 素 中 。 

1oad 方 法 还 有 一 个 额外 的 好 处 : 指定 过 滤 条 件 ， 请 求 响 应 内 容 的 一 个 子 集 。 举 个 例子 ， 下面 
的 代码 通过 指定 一 个 CSS 选 择 器 (#1atest ) 只 请 求 了 某 张 网 页 (news.php ) 的 其 中 一 部 分 : 


$("'divi#news-ticker').load('news.php #1latest'); 


用 这 种 方式 载 人 HTML 片段 特别 有 助 于 获取 一 张大 型 网 页 里 的 一 小 段 内 容 子 集 。 

用 Ajax 请 求 内 容 的 一 个 潜在 威胁 是 服务 器 响应 所 需 的 时 间 , 如 果 网 络 较 慢 或 者 请 求 太 多 , 它 
就 可 能 导致 用 户 界面 出 现 明 显 的 延迟 。 从 服务 需 取 回 数据 时 ， 良 好 的 做 法 是 在 请 求 执行 过 程 中 显 
示 一 个 “加 载 中 ”的 指示 需 。 

3. 确定 内 容 何 时 应 加 入 基础 标记 

大 多 数 情况 下 , 所 有 的 内 容 和 功能 都 应 该 在 基础 标记 里 展现 出 来 。 但 是 可 能 有 时 某 个 特定 功 
能 过 于 复杂 ， 在 缺乏 JavaScript 行 为 时 难以 使 用 。 举 个 例子 ， 第 2 章 提 到 ， 给 照片 管理 顺 在 基本 体 
验 里 重建 增强 版 的 照片 裁 切 工具 〈 使 用 时 用 户 需要 指定 裁 切 点 的 精确 像素 坐标 ) 使 用 难度 大 高 。 
考虑 到 其 复杂 程度 ， 像 这 样 的 案例 最 好 还 是 留 给 增强 体验 。 

另外 一 些 情况 下 ，JavaScript 焚 用 时 内 容 可 能 会 毫 无 意义 。 举 个 例子 ,“ 打 印 本 页 ”这 个 链接 
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完全 依赖 JavaScript 才 能 工作 ， 所 以 当 JavaScript 不 存在 或 被 禁用 时 它 给 用 户 的 感觉 就 是 损坏 的 。 
类 似 地 ， 某 个 需要 JavaScript 才 能 工作 的 自 定 义 表单 控件 标记 ， 在 无 JavaScript 的 环境 里 只 会 让 
用 户 感到 困惑 。 这 些 功能 类 型 的 标记 应 该 排除 在 基础 标记 之 外 ， 只 在 增强 体验 里 用 JavaScript 
添加 进来 。 





5.3.4 ”管理 内 容 可 见 性 


用 JavaScript 给 增强 页 面 添加 额外 的 内 容 和 标记 时 ， 你 需要 做 个 判断 ， 原 来 的 基础 标记 是 否 
应 该 保持 可 见 。 

有 时 增强 内 容 的 角色 是 基础 标记 的 补充 , 让 两 者 能 在 网 页 上 有 意义 地 共存 。 请 考虑 一 个 基于 
canvas 的 图 表 ， 它 根据 基础 标记 里 某 个 HTML 数据 表格 生成 : 视觉 性 的 图 表 外 观 和 细节 性 的 数据 
表格 可 以 共同 呈现 , 为 用 户 提供 额外 的 丰富 性 和 意义 , 所 以 我 们 肯定 会 考虑 在 网 页 上 同时 显示 两 
者 。 类 似 地 ， 如 果 将 某 个 input 或 者 自 定 义 的 select 元 素 增强 成 一 个 滑 块 ， 通 常会 将 原生 元 素 和 
增强 滑 块 同时 放 在 页 面 上 ， 给 用 户 提 供 更 多 样 的 交互 机 会 。 

然而 ,， 有 些 时 候 增强 内 容 完 全 取代 了 基础 标记 里 的 版 本 ,比如 用 自 定义 样式 的 select 元 素 取 
代 了 原生 版 本 的 控件 。 让 它们 同时 可 见 不 但 多 余 ， 还 可 能 会 让 用 户 感到 困惑 。 在 这 些 情况 下 , 将 
原生 控件 对 用 户 隐 藏 起 来 十 分 重要 。 

1. 从 视觉 上 而 非 听 觉 上 隐藏 内 容 

考虑 显示 和 隐藏 时 , 我 们 总 是 会 考虑 广大 用 户 , 包括 那些 使 用 屏幕 阅读 器 的 用 户 。 前 面 提 到 ， 
当 我 们 根据 HTML table 数 据 用 HTML5 的 canvas 元 素 创建 图 表 时 (将 在 第 12 章 详细 介绍 ), 图 表 和 
表格 是 两 种 有 点 重复 的 内 容 。 既 然 它 们 是 重复 的 ， 有 些 设计 师 可 能 会 选择 隐藏 数据 表格 ,显示 图 
表 。 但 是 图 表 只 对 视力 正常 的 用 户 有 用 ,对 使 用 屏幕 阅读 器 的 用 户 来 说 ， 从 网 页 中 彻底 移 除 包含 
数据 值 的 表格 会 导致 内 容 不 可 访问 。 

如 果 隐 藏 对 屏幕 阅读 器 用 户 来 说 仍然 是 必需 的 内 容 时 ， 最 重要 的 是 避免 使 用 display: none 
或 visibility: hidden 等 CSS 属 性 。 它 们 不 仅 会 将 内 容 从 视线 里 隐藏 起 来 ， 还 可 能 会 波及 到 屏幕 
阅读 器 。 为 了 安全 地 隐藏 内 容 , 应 该 对 它 使 用 绝对 定位 并 设置 一 个 很 大 的 负数 左边 值 ( position: 
absolute; left: -99999px; )， 使 它 可 靠 地 移出 屏幕 。 

2. 对 所 有 用 户 隐藏 内 容 

一 些 自 定义 表单 控件 在 增强 体验 里 生成 的 内 容 与 基础 标记 执行 相同 的 本 质 功能 。 在 网 页 上 同 
时 保留 原生 和 增强 版 的 控件 ,对 所 有 用 户 来 说 都 是 个 麻烦 。 拿 某 个 自 定义 样式 的 下 拉 菜 单 为 例 (会 
在 第 17 章 详细 介绍 ), 它 使 用 a、ul、1i 和 div 等 元 素 创建 出 一 种 对 CSS 友 好 的 可 用 版 本 来 代替 原生 
的 select 元 素 。 如 果 增 强 版 控件 生成 并 插入 页 面 ， 基 础 版 的 select 元 素 就 完全 多 余 了 ， 同 时 看 见 
这 两 个 可 能 令 人 非常 困惑 。 

许多 设计 师 / 开 发 者 会 用 JavaScript 把 原生 控件 从 网 页 中 彻底 移 除 ， 只 剩 下 增强 版 的 控件 。 可 
惜 ,这 可 能 会 带 来 很 大 问题 : 新 版 的 标记 虽然 在 选择 功能 方面 完美 可 用 , 但 是 没有 办 法 将 它 的 数 
据 和 表单 其 余部 分 一 起 提交 ， 因 为 归根 到 底 它 只 不 过 是 一 堆 div 和 一 张 列表 。 
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在 这 个 案例 中 ， 有 必要 创建 一 个 代理 ， 也 就 是 用 display: none 从 视觉 上 隐藏 屏幕 里 的 原生 
表单 控件 , 但 仍然 将 它 留 在 网 页 标记 里 , 保存 值 用 于 表单 提交 。 然 后 ， 用 JavaScript 连 接 增 强 版 蔡 
代 控 件 和 它 对 应 的 原生 元 素 ,这样 当 用 户 修改 控件 值 时 程序 会 自动 操作 隐藏 的 select 元 素 。 如 果 
代码 编写 得 当 , 代理 就 能 让 表单 用 原生 控件 的 值 进行 提交 。 对 服务 器 来 说 ， 就 像 增 强 版 控件 不 存 
在 一 样 。 


5.3.5 ”应 用 样式 增强 


通过 加 载 和 操作 CSS 给 HTML 标 记 添 加 样式 是 创建 增强 体验 的 基础 。JavaScript 帮 助 实现 增强 
的 方式 有 许多 。 
> 动态 加 载 额外 的 CSS 文 件 。JavaScript 可 以 用 来 将 样式 表 载 入 页面 。 这 是 我 们 所 用 方法 里 
的 一 个 关键 要 素 : 我 们 已 知 一 些 复杂 样式 在 某 些 浏 览 右 里 的 支持 程度 不 一 ， 因 此 将 它们 
存放 在 外 部 样式 表 里 ， 首 先 用 EnhanceJS 测 试 某 种 浏览 器 是 否 能 成 功 泻 染 出 增强 样式 ， 符 
合 特定 条 件 后 再 插入 一 个 或 多 个 增强 样式 表 。 这 一 技巧 对 那些 需要 应 用 复杂 样式 的 大 规 
模 增强 是 很 有 用 的 ， 比 如 将 一 张 线 性 网 页 转换 成 多 列 网 格 布 局 。 
> 切换 HTML 类 。 我 们 提倡 使 用 JavaScript 来 添加 、 移 除 和 切换 CSS 类 ， 而 不 是 用 JavaScript 
编写 内 联 的 CSS 规 则 。 因 为 样式 规则 存放 在 外 部 CSS 文 件 里 ， 而 非 遍 布 整套 脚本 逻辑 ， 所 
以 我 们 能 够 清楚 地 分 离 样 式 和 行为 ,简化 调试 和 维护 工作 。JavaScript 还 提供 了 一 种 方法 ， 
为 那些 不 能 原生 支持 伪 类 ( 例如 :hover 或 :focus ) 的 浏览 器 提供 了 CSS 支 持 扩展 。 举 个 例 
子 ， 利 用 JavaScript， 能 在 用 户 把 鼠标 放 在 某 个 元 素 上 方 时 动态 指派 一 个 “ 巧 浮 ”类 。 
> 用 style 属 性 内 联 应 用 样式 。 在 极其 有 限 的 情形 中 ， 操 作 CSS 类 是 不 现实 的 。 举 个 例子 ， 
当 JavaScript 需 要 动态 设置 或 者 为 样式 规则 添加 动画 效果 时 ( 此 时 可 能 需要 对 对 话 框 窗口 
的 位 置 和 尺寸 属性 进行 数 百 次 操作 , 来 实现 它 在 屏幕 上 的 动画 效果 、 重 设 大 小 和 重 定位 )， 
创建 一 组 数量 固定 的 静态 类 是 不 现实 的 。 在 这 种 情况 下 ， 有 限度 地 使 用 动态 内 联 样式 设 
置 则 是 最 有 效 的 选择 。 如 果菜 个 动画 需要 进行 动态 样式 脚本 编程 ， 比 如 实现 同时 淡 入 淡 
出 (cross-fade ) 效果 ， 另 一 种 好 的 做 法 是 当 动 画 结束 时 移 除 所 有 的 内 联 样式 ， 然 后 用 类 
属性 奉 换 它们 ， 以 保持 视觉 外 观 并 避免 将 内 联 样式 遗留 在 网 页 中 。 最 后 ， 如 果 某 些 案例 
里 的 标记 被 用 来 视觉 化 呈现 数据 ( 例如 给 某 个 div 元 素 添加 样式 ， 让 它 表 现 为 条 形 图 里 的 
长 条 ), 一 种 现实 的 做 法 是 使 用 JavaScript 生 成 一 个 内 联 样式 并 将 其 应 用 到 该 div 上 ， 这 样 
它 的 外 观 就 与 数据 大 小 相 匹 配 了 。 


5.4 ”保持 和 增强 可 用 性 与 可 访问 性 


用 语义 化 HTML 构 建 的 基本 网 页 一 般 来 说 是 天 然 可 访问 的 。 屏 幕 阅读 器 和 其 他 辅助 技术 被 设 
计 用 来 理解 HTML， 并 将 它 的 的 内 容 传达 给 用 户 。 基 础 标记 很 少 需要 在 这 些 环境 里 进行 测试 。 大 
多 数 情况 下 它 都 好 用 。 

可 惜 , 对 增强 体验 而 言 , 这 一 规律 并 不 是 经 常 适用 。 即 使 增强 信息 是 由 最 具 描 述 性 的 标记 构 
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建 的 , 也 可 能 会 遇 上 HTML 就 是 没有 足够 的 元 素来 描述 各 项 功能 的 情况 。 一 个 视力 正常 的 用 户 能 
轻易 辨认 出 某 个 自 定义 样式 的 下 拉 菜 单 是 原生 select 的 等 价 物 。 与 之 相反 , 屏幕 阅读 器 只 能 通过 
构建 这 一 控件 的 元 素 (一 个 标准 HTML 链 接 、 一 两 个 div 和 一 张 无 序 列表 ) 来 识别 它 ， 而 这 几乎 
不 能 说 明 它 在 用 户 界 面 里 的 角色 。 幸 好 ，ARIA 属 性 能 帮助 缓解 这 一 问题 ( 至 少 是 对 那些 使 用 现 
代 屏 幕 阅读 软件 的 用 户 而 言 )， 本 节 稍 后 进行 讨论 。 

用 户 辨认 出 一 个 熟悉 的 控件 时 , 他 们 通常 会 认为 自己 能 使 用 熟悉 的 传统 键盘 操作 ,比如 用 空 
格 键 打开 一 张 下 拉 荣 单 ， 用 方向 键 在 选项 里 导航 ， 以 及 再 次 按 下 空格 键 做 出 选择 。 创 建 自 定义 控 
件 时 ,开发 者 通常 有 责任 手动 移植 这 些 HTML 控 件 原生 的 行为 。 构 建 可 用 键盘 访问 并 对 屏幕 阅读 
器 有 意义 的 自 定义 控件 , 需要 付出 额外 的 努力 和 编程 时 间 , 可 惜 这 类 控件 的 构建 工作 却 常常 留 到 
最 后 一 刻 草率 实现 ， 或 者 干脆 彻底 排除 在 最 终 产 品 之 外 。 

这 是 一 个 大 问题 ,不仅 对 残障 用 户 来 说 如 此 ， 对 那些 自主 选择 (或 者 被 限制 只 能 ) 通过 键盘 
导航 浏览 网 站 的 人 来 说 , 也 是 如 此 。 缺乏 键盘 快捷 命令 功能 的 自 定义 控件 相 比 它们 的 原生 等 价 元 
素 有 所 退步 ， 还 会 让 用 户 感到 不 殉 ， 乃 至 于 抵消 了 增强 所 带 来 的 好 处 。 

从 这 些 原因 看 , 重要 之 处 在 于 自 定义 控件 要 能 代替 原生 控件 的 功能 , 不 仅 要 支持 空格 键 、 回 
车 键 和 方向 键 ， 还 要 支持 向 上 翻 页 键 (Page Up )、 向 下 翻 页 键 ( Page Down )、 起 始 键 (Home ) 
和 结束 键 ( End ), 等 等 。 这 些 功能 需要 额外 的 时 间 和 高 度 的 注意 力 才 能 开发 得 又 好 又 准确 ( 这 就 
是 我 们 建议 只 要 有 疑虑 就 应 优先 考虑 使 用 原生 控件 的 原因 )。 但 是 ， 但 在 某 些 情况 下 构建 自 定 义 
增强 控件 物 有 所 值 , 因此 十 分 有 必要 将 原生 控件 所 有 的 可 访问 性 和 可 用 性 功能 宫 括 到 自 定义 组 件 
里 来 。 














































































































5.4.1 实现 键盘 访问 


开发 自 定义 组 件 时 , 要 点 在 于 首先 要 复制 原生 的 功能 , 然后 再 用 额外 的 功能 扩展 它 。 这 一 点 
对 键盘 事件 来 说 特别 重要 , 因为 用 户 对 与 某 个 熟悉 控件 的 交互 方式 抱 有 预先 形成 的 期 望 。 这 一 闻 
会 讨论 键盘 访问 的 两 个 主要 考虑 对 象 : 制 表 键 (Tab ) 焦点 和 编写 事件 脚本 。 

1. 管理 制 表 键 焦点 

在 所 有 HTML 元 素 中 ， 只 有 少数 几 个 ( 包括 a、input 、button、select 和 textarea ) 可 以 获得 
原生 键盘 焦点 。 焦 点 由 制 表 键 进行 控制 ， 反 复 按 下 这 个 键 会 让 焦点 在 网 页 上 的 有 效 元 素 之 间 移 动 。 

在 基本 网 页 里 ,元 素 焦 点 移动 的 顺序 被 称 为 制 表 键 顺序 ( tab order )。 这 个 顺序 可 以 用 tabindex 
属性 控制 ， 该 属性 接受 两 个 值 : 0 让 某 个 元 素 能 够 获得 焦点 ， 根 据 它 在 默认 源 代 码 里 的 顺序 指定 
它 的 制 表 键 顺序 ; -1 会 把 某 个 元 素 从 制 表 键 顺序 中 彻底 移 除 。( 虽然 从 技术 上 说 可 以 指定 一 个 正 
整数 ,覆盖 默认 的 制 表 键 顺 序 ,但 是 不 推荐 这 人 么 做 ,因为 如 果 做 得 不 正确 可 能 会 引发 可 用 性 问题 。) 

在 增强 版 的 网 页 里 管理 焦点 需要 用 到 JavaScript， 使 自 定义 控件 能 够 模拟 其 对 应 原生 元 素 的 
行为 : 具体 而 言 ， 要 点 在 于 要 编写 出 一 套 逮 辑 ， 让 控件 可 以 通过 制 表 键 获得 焦点 ， 并 在 获得 焦点 
后 根据 设计 意图 立即 启用 空格 键 、 回 车 键 、 方 向 键 等 按键 在 控件 中 导航 。 类 似 地 , 按 下 制 表 键 应 
该 可 以 将 焦点 从 一 个 控件 转 到 下 一 个 控件 。 
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自 定义 控件 里 的 某 些 元 素 有 时 会 具备 我 们 不 想 复制 的 原生 焦点 能 力 。 举 个 例子 , 在 自 定义 样 
式 下 拉 菜 单 里 , 我 们 用 一 张 无 序 列表 加 上 一 组 锚 链 接 ( 它们 原生 能 够 获得 制 表 符 焦 点 ) 组 成 可 选 
项 。 这 种 情况 下 ,我 们 和 希望 这 些 锚 点 的 行为 类 似 于 标准 下 拉 列 表 的 option 值 ， 后 者 原生 可 以 使 用 
方向 键 访问 。 我 们 可 以 将 每 个 链接 (a ) 的 tabindex 设 置 为 -1， 防 止 它 获得 制 表 键 焦点 。 要 点 是 ， 
如 果 某 个 元 素 的 tabindex 设 为 -1, 那么 它 的 焦点 就 只 能 通过 程序 进行 管理 了 , 要 用 JavaScript。( 第 


























2. 编写 键盘 事件 脚本 

JavaScript 里 的 许多 键盘 事件 ( 例如 keydown、keyup 和 keypress ) 可 以 绑 定 到 元 素 上 。 绑 定 了 
某 个 键盘 事件 ， 就 可 以 使 用 条 件 逻 辑 来 判断 按 下 的 是 哪个 键 ， 以 及 触发 哪些 操作 。 

键盘 事件 提供 了 一 个 名 为 keyCode 的 属性 , 它 储 存 一 个 数字 ,对 应 按 下 后 触发 事件 的 那个 键 。 
(Keycode 数 字 的 参考 资料 在 网 上 免费 可 查 。) 下面 的 代码 演示 了 用 jQuery 将 keypress 事 件 绑 定 到 某 
个 锚 点 上 : 


$('#myAnchor').keypress(function(event){ 
if(event.keyCode == 39){ 
// 按 下 了 右 方向 键 
} 
} 


基于 这 种 逻辑 , 可 以 将 自 定义 组 件 的 功能 映射 到 对 应 的 键盘 操作 上 。 举 个 例子 , 之 前 的 代码 
范例 将 keypress 事 件 绑 定 到 了 一 个 锚 点 上 ,， 按 下 右 方 向 键 时 会 执行 一 段 脚本 。 这 有 段 特定 的 代码 在 
某 些 时 候 很 有 用 ， 比 如 给 某 个 树 形 控件 添加 键盘 文 持 , 将 焦点 移 至 树 节 点 , 然后 用 方向 键 切换 控 
制 其 子 元 素 的 可 见 性 。 


























5.4.2 ”指派 WAI-ARIA 属 性 


键盘 支持 被 集成 进 自 定 义 控件 后 ,这 个 控件 对 所 有 用 户 的 可 访问 性 就 大 大 提升 了 。 但 是 , 仍 
必须 正确 通知 屏幕 阅读 器 某 段 标记 正在 扮演 一 个 自 定义 组 件 的 角色 ， 而 不 是 仅仅 在 那里 组 织 
容 。 为 此 ， 我 们 使 用 W3C WAI-ARIA 规 范 〈 通 常 简 称 ARIA ) 里 概述 的 一 些 属性 。 

第 3 章 介 绍 了 ARIA, 并 且 讨 论 了 在 基础 标记 里 给 元 素 应 用 角色 , 如 何 能 为 屏幕 阅读 器 用 户 开 
启 一 套 逻 辑 导 航 选择 。ARIA 属 性 还 能 扮演 一 个 重要 的 角色 ， 帮助 辨识 和 描述 增强 体验 里 的 动态 
内 容 。 举 个 例子 ， 可 以 用 标准 HTML 锚 链接 制作 一 个 可 点 击 的 “打印 ”按钮 ， 通 过 给 它 应 用 一 个 
值 为 button 的 ARIA role 属 性 ， 就 能 恰当 地 将 它 描述 为 一 个 按钮 。 

大 部 分 ARIA 属 性 及 其 关联 的 值 本 意 是 为 了 在 增强 体验 里 使 用 ， 一般 也 都 会 通过 JavaScript 进 
行 应 用 。 和 所 有 HTML 属 性 一 样 , ARIA 属 性 可 以 通过 JavaScript 原 生 的 setAttribute 方 法 进行 设置 
或 修改 。 下 面 的 代码 演示 了 给 某 个 锚 链 接 指派 一 个 button 角 色 : 

document .getElementById('myAnchor' ).setAttribute('role','button'); 

使 用 jQuery 则 代码 长 度 大 大 缩短 : 


$('#myAnchor').attr('role','button' ); 
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5.4.3 测试 可 访问 性 


增强 体验 经 常会 背离 并 改变 原生 行为 ,所 以 关键 是 要 用 屏幕 阅读 需 等 辅助 技术 对 它们 进行 测 
试 。 开 发 者 不 仅 需要 确保 他 们 的 代码 在 技术 上 与 这 些 设备 兼容 , 还 要 让 网 页 在 用 户 的 视角 里 具备 
意义 。 

一 些 最 流行 的 屏幕 阅读 器 十 分 昂贵 ,以 至 于 让 许多 开发 者 负担 不 起 。 垃 好， 有 许多 类 似 的 阅 
读 器 是 免费 的 ， 并 且 功 能 毫 不 逊色 ， 就 可 用 性 测试 而 言 十 分 有 用 。 

> Mac 操 作 系统 自 带 一 个 非常 健壮 的 内 建 屏幕 阅读 器 ， 名 为 VoiceOver。 你 可 以 打开 “系统 
首选 项 ”( System Preferences )， 找 到 “通用 访问 ”( Universal Access ) 版 块 ， 然 后 在 那里 
启动 它 。( “通用 访问 ”版 块 里 还 有 其 他 许多 有 用 功能 可 以 用 来 测试 可 访问 性 ， 比 如 可 以 
将 屏幕 切换 到 灰 度 模式 ， 检 查 对 比 度 是 否 合适 。) 
对 Windows 用 户 和 在 PC 上 进行 测试 的 开发 者 ,我 们 推荐 下 载 和 安装 免费 的 NVDA 屏 幕 阅读 
人 大， 地 址 是 http://mvda-project.org。 



































Vv 


提示 ”这 里 有 一 篇 介绍 安装 和 使 用 NVDA 的 优秀 文章 : http://t.cn/zRITbxA。 











PP JAWS 是 网 上 最 流行 的 屏幕 阅读 器 之 一 ， 它 有 一 个 免费 的 40 分 钟 演 示 版 。 这 个 版 本 用 起 来 
稍微 有 些 不 便 ( 使 用 40 分 钟 后 ， 它 会 要 求 重启 Windows )， 但 鉴于 这 个 广泛 使 用 的 屏幕 阅 
读 器 的 流行 程度 ， 我 们 仍然 认为 这 是 值得 的 。( 在 Filament 集 团 里 ,我 们 给 Mac 安 装 了 
VMWare Fusion， 让 Windows 和 其 他 应 用 程序 共同 运行 ， 所 以 我 们 能 测试 上 面 提 到 的 全 部 
三 种 屏幕 阅读 器 。) 
除了 用 屏幕 阅读 器 进行 内 部 测试 , 另 一 种 了 解 网 站 是 否 可 访问 的 宝贵 方法 是 ， 请 残障 用 户 现场 
进行 可 用 性 测试 。Just 4sk: Integrating 4Accessibility Throughout Design 的 作者 们 维护 了 一 个 非常 有 用 的 
资源 网 站 ， 里 面 有 各 种 帮助 性 提示 、 指 南 和 其 他 资源 : www.uiaccess.com/accessucd/ut_plan.html。 


5.4.4 维持 状态 和 “后 退 ” 按 钮 


Ajax 应 用 程序 〈 而 且 特 别 是 Ajax 应 用 程序 ) 引入 了 一 个 独特 的 可 访问 性 问题 : 随 着 用 户 与 网 
页 进行 交互 ， 屏 幕 上 描绘 的 内 容 和 浏览 器 地 址 栏 里 显示 的 网 页 状态 之 间 可 能 会 失去 联系 。Ajax 调 
用 并 不 原生 记录 在 浏览 器 历史 里 , 所 以 , 产生 的 变化 可 能 与 用 户 对 他 所 执行 操作 的 认 知 并 不 相符 。 

决定 是 否 要 在 浏览 器 的 历史 记录 里 追踪 网 页 变化 时 , 一 个 不 错 的 经 验 法 则 是 , 看 用 户 是 否 可 
能 认为 他 们 的 操作 将 他 们 带 到 了 一 张 新 的 “页 面 "。 举 个 例子 ， 如 果 一 个 基于 JavaScript 的 标签 页 
横 条 控制 了 网 页 里 足够 大 的 区 域 , 感觉 它 就 像 是 一 个 主要 导航 元 素 , 那么 可 能 就 值得 通过 历史 追 
踪 每 一 次 的 标签 点 击 , 这 样 用 户 就 可 以 通过 标签 视图 的 历史 记录 或 者 收藏 那 一 页 , 回 退 到 之 前 的 
页 面 。 追踪 还 可 能 适用 于 搜索 结果 页 ， 用 来 在 结果 分 组 之 间 导 航 ,或 是 在 一 组 标签 中 确定 自己 的 
位 置 。 
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在 Ajax 应 用 程序 里 追踪 状态 需要 用 JavaScript 更 新 和 关注 URL# 号 串 ( 它 是 网 页 URL 的 一 部 








分 , 能 通过 ID 属 怕 


链接 到 文档 的 某 个 版 块 ) 发 生 的 变化 。 举 个 例子 , 下面 的 URL 会 将 页 面 深 动 到 





有 D 为 content 的 元 素 上 : 

http://example.conm/#content 

9.3 节 会 分 析 如 何 制作 一 个 插件 ， 让 它 用 URL# 号 串 在 Ajax 应 用 程序 里 管理 历史 记录 。 

我 们 已 经 分 析 了 如 何 无 缝 应 用 JavaScript, 如 何 编写 语义 化 HTML, 以 及 清楚 分 离 和 编写 有 效 
的 样式 , 现在 你 的 手头 上 已 经 有 了 渐进 增强 的 所 有 核心 要 素 。 接 下 来 , 我 们 会 向 你 展示 如 何 用 能 
力 测试 将 它们 组 合 在 一 起 ， 确 保 你 只 对 有 能 力 的 浏览 器 输出 增强 信息 。 
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如 果 某 种 设计 包含 高 级 的 CSS 和 JavaScript, 为 了 确保 你 能 提供 可 用 的 体验 , 借助 渐进 增强 方 
法 进行 开发 (用 语义 化 HTML 构 建 内 容 和 功能 ， 然 后 到 加 上 更 为 复杂 的 样式 和 行为 ) 就 是 有 力 的 
第 一 步 。 但 是 , 单纯 把 标记 从 表现 和 行为 中 分 离 出 来 ,并 不 能 保证 增强 信息 只 输出 给 有 能 力 演 染 
它们 的 浏览 器 。 

幸好 , 有 一 种 方法 可 以 让 你 免 于 猜测 : 测试 浏览 器 能 力 。 通 过 测试 某 个 浏览 器 实际 上 能 做 什 
么 ， 你 就 能 更 明确 地 判断 它 是 和 否 会 正确 泻 染 页 面 增强 信息 。 

在 Filament 集 团 里 ， 我 们 将 此 看 做 用 渐进 增强 方法 进行 开发 最 重要 的 一 个 方面 。 我 们 的 能 
测试 会 同时 检查 JavaScript 和 CSS 的 支持 情况 ， 确 保 一 系列 关键 功能 可 以 正确 泻 染 , 这 样 就 能 够 假 
定 设计 所 需 的 那些 特定 样式 或 行为 的 依赖 关系 会 按照 设计 的 方式 工作 。 我 们 的 经 验 是 , 大 多 数 复 
杂 界 面 和 交互 组 件 都 依赖 于 JavaScript 和 CSS 协 同 工 作 。 因 此 ， 我 们 构建 了 EnhanceJS。 它 是 一 套 
测试 框架 ,能够 检查 能 力 并 有 条 件 地 应 用 增强 ， 男 外 还 添加 了 一 个 备用 选项 ， 以 防 能 力 测试 出 现 
不 准确 的 情况 。 

本 章 会 分 析 EnhanceJS 的 构建 方式 和 工作 原理 ， 解 释 如 何在 你 自己 的 项 目 里 使 用 Enhance]JS， 
并 介绍 如 何 扩展 EnhanceJS 里 许多 可 定制 的 手段 ， 从 而 更 好 地 控制 增强 信息 的 输出 方式 。 本 章 最 
后 会 讨论 如 何 进 一 步 利 用 能 力 测试 的 这 些 原则 创建 你 自己 的 测试 。 
































6.1 EnhanceJS: 一 套 能 力 测试 框架 


EnhanceJS 是 一 套 轻 量 级 JavaScript 框 架 ， 在 某 人 首次 访问 网 站 时 运行 一 套 脚本 和 样式 能 力 测 
试 。 如 果 所 有 测试 都 通过 了 就 是 说 ， 如 果 测 试 确认 浏览 器 确实 支持 所 有 功能 )， 它 就 把 CSS 或 
者 脚本 增强 添加 到 文档 上 。 如 果 任 何 一 项 测试 没有 通过 , 那 就 不 会 有 增强 , 网 页 会 按照 原样 显示 : 
一 种 功能 齐全 的 基本 体验 。 

测试 通过 后 ， 这 个 脚本 通过 两 种 方式 给 网 页 应 用 增强 。 

(1) 它 给 html 元 素 指 派 一 个 名 为 enhanced 的 类 。 附 带 样式 表 里 所 有 属于 该 类 的 样式 规则 在 指 
派 类 时 生效 。 

(2) 如 果 指 定 了 任意 数量 的 脚本 或 样式 表 文 件 ， 它 们 会 被 添加 到 文档 的 head 里 。 

随后 , EnhanceJS 将 浏览 器 是 否 通过 测试 的 结果 保存 在 一 个 cookie 里 , 避免 此 框架 在 每 次 载 人 
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网 页 时 都 运行 一 遍 能 力 测试 。EnhanceJS 在 后 续 页 面 中 运行 时 , 它 首 先 检 查 那 个 cookie,， 接 着 会 添 
加 增强 信息 (或 者 不 添加 )。 如 果 没 有 找到 cookie， 它 就 会 再 次 运行 那 一 套 测试 。 
作为 一 种 备用 选择 , 这 个 框架 脚本 会 将 一 个 切换 链接 添加 到 文档 主体 中 , 让 用 户 可 以 手动 切 
换 网 站 的 基本 版 和 增强 版 。 这 个 级 别 的 用 户 控制 在 一 些 场合 很 有 价值 ， 比 如 某 种 浏览 器 通过 了 测 
试 , 应 用 了 增强 , 但 是 有 东西 不 能 正常 工作 。 虽 然 我 们 测试 浏览 器 能 力 来 防止 出 现 这 种 情形 , 但 
是 用 户 在 增强 体验 里 遇 到 问题 的 可 能 性 总 是 存在 的 ( 特别 是 考虑 到 如 今 的 可 上 网 设备 多 种 多 样 )。 
能 够 将 网 页 切换 回 更 简单 的 、 功 能 完备 的 基本 体验 ， 是 我 们 渐进 增强 方法 论 里 的 一 个 关键 功能 。 
如 果 有 用 户 喜 欢 浏览 更 简单 而 且 速 度 可 能 更 快 的 网 站 版 本 的 话 ， 这 个 功能 也 很 顺手 。 
EnhanceJS 框 架 由 3 个 主要 部 分 组 成 。 
> 写 人 每 张 网 页 的 一 小 段 脚本 块 会 调用 enhance 函 数 。 此 函数 接受 若干 选项 ， 包 括 如 果 浏 览 
髓 有 支持 能 力 的 话 应 该 添加 哪些 JavaScript 或 CSS 文 件 。 如 果 JavaScript 没 有 启用 ， 这 个 困 
数 就 会 被 忽略 ， 使 浏览 器 泻 染 出 基本 版 的 网 页 。 
> 存放 在 一 个 单独 文件 ( enhance.js ) 里 的 框架 脚本 。 它 是 整套 操作 背后 的 大 脑 : 它 运行 全 
套 能 力 测试 , 记录 哪些 通过 哪些 未 通过 。 如 果 所 有 测试 都 通过 了 ,， 它 就 把 enhanced 类 指派 
给 html 元 素 ， 如 果 指 定 了 文件 的 话 还 会 把 它们 插入 到 网 页 里 。 
> 一 个 接 入 框架 脚本 的 套件 ， 内 含 一 个 或 多 个 能 力 测试 。 套 件 里 的 每 个 测试 都 针对 单个 
JavaScript 方 法 或 者 CSS 属 性 ， 如 果 浏 览 咒 支持 此 功能 , 该 测试 就 返回 一 个 true 值 。 默认 情 
况 下 ， 我 们 加 入 了 一 些 涵盖 JavaScript 和 CSS 代 表 性 功能 的 测试 ， 可 以 进行 编辑 或 扩充 ， 
以 满足 具体 项 目的 需要 。 
能 力 测试 提供 了 一 套 机 制 ， 使 增强 信息 只 面向 能 够 处 理 它们 的 浏览 器 。 




















































































































能 力 测试 框架 
测试 浏览 器 能 力 是 一 种 新 兴 技 术 ， 但 值得 高 兴 的 是 ， 我 们 已 经 知道 至 少 有 另外 一 个 库 能 
够 补充 和 扩展 EnhanceJS， 这 个 库 是 Modernizr ( http://modernizr.com )， 它 为 HTML5 里 的 许多 功 
能 提供 了 详细 的 测试 案例 。 随 着 对 渐进 增强 和 能 力 测试 的 讨论 进一步 深入 , 我们 计划 留意 那些 
新 的 库 和 技巧 。 请 查看 本 书 的 网 站 ( www.filamentgroup.com/dwpe ) 了 解 另外 一 些 有 用 的 能 
测试 框架 及 其 链接 ， 我 们 会 试 着 用 更 有 用 的 资源 更 新 这 个 网 站 ， 只 要 我 们 能 找到 。 


EnhanceJS 的 机 制 : 测试 是 怎样 工作 的 


EnhanceJS 框 架 使 用 两 种 测试 机 制 来 判断 浏览 器 支持 : 对 象 探 测 用 于 JavaScript 功 能 ， 一 个 基 
于 脚本 的 自 定 义 方法 用 于 测试 CSS 演 染 的 准确 性 。 
对 JavaScript 功 能 支持 而 言 ， 久 经 考验 的 对 象 探测 方法 提供 了 一 种 方式 ， 来 判断 某 种 浏览 器 
是 否 支 持 特定 的 JavaScript 对 象 、 方 法 或 属性 ， 只 需 简单 地 将 它 放 人 条 件 语 名 内， 然后 运行 即 可 。 
举 个 例子 ，getElementById 是 一 种 常用 的 方法 ， 它 使 用 某 个 元 素 的 id 值 来 在 DOM 里 找到 它 : 


var myE1 = document.getElementById('myElement'); 
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我 们 可 以 用 以 下 方式 测试 浏览 需 ， 看 它 是 否 支 持 getElementById 这 样 的 方法 : 
if (document .getELementById) { 
// 浏览 器 支持 此 对 象 
我 们 在 EnhanceJS 里 用 这 个 简单 的 对 象 探测 模型 来 测试 JavaScript 的 支持 情况 ， 网 页 调用 
enhance() 时 会 测试 下 面 这 些 能 
做 document.getElementById: 通过 ID 找到 元 素 。 
做 document .getELementsByTagName: 通过 标签 名 找到 元 素 。 
做 document.createElement: 创建 新 的 元 素 。 
> xmlHttpRequest: 测试 Ajax 文 持 ( 我 们 会 测试 此 对 象 的 几 种 流行 实现 方式 )。 
> window.resize: 探测 窗口 大 小 调整 时 产生 的 变动 。 
> window.print: 触发 浏览 右 的 打印 对 话 框 
在 默认 的 EnhanceJS 测 试 套件 中 包含 针对 这 些 对 象 的 测试 ， 是 因为 我 们 发 现 它们 能 够 很 好 地 
代表 一 类 最 常见 操作 ， 支 持 这 些 操 作 ， 才 能 成 功 访问 和 操作 文档 元 素 。( 本 章 稍 后 会 讨论 如 何 修 
改 这 张 列表 ， 配 置 EnhanceJS， 使 它 适 用 于 你 自己 的 项 目 。) 
测试 CSS 的 支持 情况 则 稍微 有 些 复杂 ,原因 有 两 个 。 
PP CSS 出 问题 时 ， 它 会 静 静 地 出 。 如 果 一 种 浏览 器 能 理解 某 个 CSS 属 性 ， 它 就 会 尝试 演 染 这 
个 样式 ， 哪 怕 只 能 部 分 泻 染 ; 如果 不 理解 ， 它 就 会 忽略 这 个 属性 及 其 内 部 属性 ， 而 不 会 
引发 错误 。 虽然 这 种 优雅 的 失败 机 制 是 使 用 CSS 的 好 处 之 一 ( 它 让 我 们 可 以 安全 地 试验 新 
CSS 属 性 ， 哪 怕 它 有 时 不 能 正常 工作 )， 但 是 它 也 会 让 CSS 支 持 变 得 特别 难以 测试 。 
> 即使 有 可 能 像 测试 JavaScript 对 象 那样 测试 CSS 属 性 的 支持 情况 ， oll 准确 了 
解 它 实 际 上 是 如 何 泻 染 的 , 因为 浏览 絮 对 CSS 的 支持 程度 存在 巨大 的 差异 ( 从 视觉 上 准确 
和 可 预测 ， 到 稍 有 不 足 ， 再 到 存在 严重 问题 。) 举 个 例子 ， 某 种 浏览 器 也 许 会 报告 它 支 持 
margin， 但 演 染 实际 元 素 的 外 边 距 时 ， 可 能 会 比 样式 表 里 指 定 的 值 更 大 或 者 更 小 。 
虽然 没有 一 种 方法 能 够 简单 可 靠 地 询问 浏览 器 是 否 支 持 某 个 CSS 属 性 , 然后 获得 一 个 能 确保 
良好 体验 的 答案 ， ee 我 们 开发 了 
许多 测试 脚本 ， 它 们 会 创建 一 个 HTML 元 素 ， 给 它 加 上 样式 并 揪 入 文档 主体 ， 然 后 手动 检查 各 种 
属性 ， 从 而 判断 浏览 费 是 否 正 确 地 演 染 了 它们 。 
举 个 例子 ， 这 些 测试 其 中 的 一 种 会 检查 浏览 器 对 CSS 盒 模型 (box model ) 的 泻 染 情况 。 盒 模 
0 子 〈 或 者 块 级 元 素 ) 的 实际 宽度 是 它 的 CSS 宽 度 、 边 框 和 内 边 距 属性 之 和 。 在 那些 
能 正确 支持 的 案例 里 ， 它 可 能 会 产生 级 联 效 果 ( cascading effect ) 而 实际 上 破坏 页 面 布局 。 
ee 应 用 1 像素 的 宽度 和 1 像素 的 左右 内 边 距 ( 内 边 距 总 共 2 像 素 )。 然 后 ， 
它 将 实际 宽度 值 与 计算 总 和 加 以 比较 ， 如 果 盒 模型 的 实现 方式 正确 ， 结 果 应 该 等 于 3 像素 : 


// 检查 盒 模式 支持 情况 的 函数 

function boxModelSupported(){ 
var newDiv = document.createElement('div'); 
newDiv.style.width = '1px'; 
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newDiv.style.padding = '1px'; 
document.body.appendChild(newDiv); 
var divWidth = newDiv.offsetWidth; 
document .body .removeChild(newDiv); 
// 比较 测量 值 和 预期 值 (3) 

// === 既 比较 类 型 又 比较 值 

return divWidth === 3; 


} 


// 检查 函数 返回 的 结果 
if (boxModelSupported()){ 
// 支 持 金 模式 


else { 
// 不 支持 盒 模式 





除了 盒 模 型 测试 之 外 ，EnhanceJS 还 采用 了 类 似 的 函数 来 测试 几 种 已 知 在 广大 新 旧 浏 览 器 里 
支持 程度 不 一 的 CSS 属 性 。 

> position: 元 素 在 页 面 里 的 位 置 。 

> float: 浮动 元 素 ， 使 其 相 邻 排列 。 

> clear: 清除 某 元 素 周 围 浮动 的 同 级 元 素 。 

做 overflow: 控制 溢出 内 容 的 泻 染 方式 。 

每 一 种 测试 能 力 的 方法 (JavaScript 对 象 探测 和 测试 CSS 泻 染 准确 度 ) 各 自 都 能 良好 地 工作 。 
但 是 , 经 验 告 诉 我 们 , 许多 复杂 的 界面 会 将 高 级 JavaScript 和 CSS 功 能 组 合 到 一 起 ,而 不 是 单独 应 
用 它们 。 因 此 , 我 们 打包 了 这 些 测 试 , 在 网 页 载 人 时 同时 应 用 它们 ,然后 使 用 总 体 结果 来 判断 是 
否 能 安全 添加 增强 信息 。 



































6.2 ”通过 EnhanceJS 应 用 增强 


要 运行 EnhanceJS， 以 下 脚本 引用 必须 存在 于 网 页 之 中 ， 放 在 head 元 素 里 面 则 更 好 ， 确 保 测 
试 能 立即 开始 〈 这 样 就 降低 了 网 页 在 增强 信息 添加 之 前 就 显示 出 来 的 可 能 性 )。 
> 对 enhance.js 脚 本 文件 的 引用 。 请 在 http://enhancejs.googlecode.com 上 下 载 最 新 版 的 
enhance.js， 将 其 复制 到 你 项 目的 脚本 文件 夹 里 ， 然 后 将 脚本 引用 添加 到 网 页 头 部 ， 就 像 
这 样 : 
<script type="text/javascript" src="js/enhance.js"></script> 


> 在 head 里 位 于 文件 引用 之 后 的 一 个 脚本 代码 块 ， 调 用 了 enhance 功 能 : 


<script type="text/javascript"> 
enhance(); 
</script> 


当 某 种 浏览 器 通过 测试 套件 后 ，EnhanceJS 将 enhanced 类 添加 到 html 元 素 上 ， 我 们 可 以 用 它 
来 界定 样式 属性 ， 从 而 姜 加 上 增强 样式 。 
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举 个 例子 ， 当 EnhanceJS 测 试 通过 并 确认 存在 CSS float 属 性 支持 时 ,在 基本 体验 里 组 织 成 一 
列 的 内 容 就 可 以 转换 成 增强 体验 里 的 多 列 布局 。 

为 此 ,应 该 给 所 有 增强 版 CSS 选 择 器 加 上 html.enhanced 前 级, 后 跟 一 个 空格 。 带 有 这 个 前 级 
的 规则 只 会 应 用 在 属于 enhanced 类 的 html 元 素 的 所 有 子 元 素 上 。 

不 带 有 这 个 前 级 的 规则 会 同时 应 用 到 基本 体验 和 增强 体验 里 ( 如 图 6-1 所 示 ): 


div.contentA, 
div.contentB { 
border 1px solid #000; 


} 



































而 带 有 此 前 缀 的 规则 只 有 EnhanceJS 测 试 通过 后 才 会 应 用 到 网 页 上 ( 如 图 6-2 所 示 ): 


html .enhanced div.contentA, 
htm]l.enhanced div.contentB { 
width: 50%; 
float: left; 
} 


图 6-2 ”应 用 enhanced 类 后 ， 这 些 div 就 并 列 浮动 


对 那些 相对 简单 、 增 强 样式 不 多 的 网 站 而 言 , 我 们 可 能 会 把 这 些 样 式 放 在 基本 样式 表 里 ， 从 
而 无 须 进 行 额外 的 服务 器 请 求 就 能 立即 使 用 它们 。 但 是 , 为 每 个 增强 元 素 都 单独 添加 这 些 选 择 器 ， 
会 给 基本 体 增 加 额外 的 代码 ， 到 一 定 程度 后 这 种 即时 优势 就 被 增加 的 文件 尺寸 给 抵消 了 。 

对 那些 更 为 复杂 的 增强 或 大 规模 页 面 转换 而 言 ， 我 们 建议 配置 EnhanceJS ， 将 外 部 的 CSS 或 
JavaScript 文 件 附 加 到 页 面 。 用 这 种 方式 附加 文件 能 确保 那些 使 用 低能 力 设 备 的 用 户 , 能 够 获得 加 
载 速度 更 快 的 基本 体验 , 此 外 还 可 能 为 网 站 主机 节省 一 些 带宽 ,因为 增强 文件 只 会 发 送 给 能 够 泻 
染 它们 的 浏览 器 。 
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防止 无 样式 内 容 闪 现 

通过 渐进 增强 方法 制作 的 网 页 可 能 会 遇 到 一 种 称 为 “无 样式 内 容 闪 现 ”(flash of unstyled 
content， 简 称 FOUC ) 的 现象 ， 表 现 为 网 页 在 没有 应 用 CSS 时 载 入 ， 随 后 快速 转变 成 带 有 样式 
的 原 定 布局 。 当 CSS 在 网 页 开始 泻 染 后 才 动态 加 载 和 应 用 ,或 者 当 JavaScript 操 作 页 面 某 个 正在 
加 载 的 部 分 时 ( 导致 内 容重 绘 或 重 排 )， 这 种 现象 就 会 发 生 。 

幸好 , EnhanceJS 提 供 了 一 种 方法 来 对 用 户 隐藏 无 样式 内 容 , 直到 CSS 加 载 完 成 。EnhanceJS 
在 测试 通过 时 给 html 元 素 添加 了 一 个 enhanced 类 ,我 们 可 以 利用 这 个 类 ,在 增强 体验 里 的 内 容 
加 载 时 隐藏 它 ， 方 法 如 下 。 

(1) 在 随 网 页 输出 的 基本 样式 表 里 ， 用 enhanced 类 的 一 条 内 部 规则 隐藏 所 有 的 body 内 容 : 

html.enhanced body { visibility: hidden; } 

(2) 在 网 页 最 终 样式 表 的 尾部 添加 一 条 规则 : 

html.enhanced body { visibility: visible; } 

因为 enhanced 类 在 测试 通过 后 会 立即 应 用 到 html 上 ， 所 以 网 页 会 保持 空白 ， 直 到 所 有 样式 
都 加 载 完成 。 

另 一 种 速度 更 快 的 FOUC 应 对 方法 是 把 EnhanceJS 集 成 到 服务 器 端的 脚本 里 ， 对 其 进行 优 
化 ， 本 章 后 面 会 讨论 这 种 方法 。 


6.3 配置 EnhanceJS 


创建 EnhanceJS 时 ， 一 个 重要 的 目标 是 让 它 具 备 灵 活性 ， 这 样 开 发 者 就 可 以 配置 它 ， 使 它 按 
照 他 们 的 网 站 或 者 应 用 程序 需要 的 方式 工作 。 我 们 让 enhance 函 数 接受 一 组 预先 定义 的 选项 ， 以 
对 象 格式 作为 参数 传递 ， 这 样 就 提供 了 一 套 干 净 的 机 制 ， 可 以 指定 许多 键 / 值 对 ( 请 注意 括号 里 
的 大 括号 ， 以 及 每 个 对 后 面 的 逗号 ， 除 了 最 后 一 对 ): 
enhance({ 
key1: value1， 


key2: value2, 
key3: value3 

















8s 





EnhanceJS 为 以 下 行为 提供 了 可 配置 的 选项 。 

> 载 入 额外 的 样式 和 脚本 文件 。 

> 改变 体验 切换 链接 的 外 观 ， 或 者 禁用 它 。 

> 当 浏 览 器 未 通过 某 项 测试 时 抛 出 一 个 alert ( 用 于 测试 目的 )。 
> 指定 你 自己 的 额外 测试 。 

下 面 几 节 会 详细 描述 如 何以 及 何 时 指定 这 些 选 项 。 
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6.3.1 载 入 额外 的 样式 表 


我 们 经 常会 设计 和 开发 应 用 程序 样式 的 界面 , 它们 需要 数量 众多 的 增强 样式 , 将 结构 轻巧 的 
基本 HTML 转 换 成 更 加 复杂 的 网 格 布局 和 交互 组 件 。 我 们 建议 将 用 于 扩展 基本 体验 样式 规则 的 增 
强 样 式 存 放 在 外 部 样式 表 里 ， 并 用 EnhanceJS 来 添加 它们 。 

要 载 人 一 张 额外 的 样式 表 ， 需 要 在 loadStyles 选 项 后 面 指定 一 个 带 有 引号 的 文件 路 径 : 

enhance({ 


loadStyles: [ 
'/css/enhancements.css" 
] 

















. | 
1oadStyles 选 项 接受 一 个 包含 若干 值 的 数组 〈 记录 在 围绕 文件 路 径 的 方 括 号 里 )， 这 就 意味 
着 你 可 以 指定 多 个 样式 表 。 每 个 样式 表 必 须 单独 列 在 一 组 引号 里 ， 多 个 样式 表 之 间 用 逗号 分 隔 : 


enhance({ 
loadStyles: [ 
'css/enhancements.css', 
'css/enhancements2.css', 
'css/enhancements3.css’ 
] 
}); 


提示 不 要 在 数组 最 后 一 个 样式 表 的 后 面 加 过 号 ， 这 人 么 做 会 产生 一 个 JavaScript 错 误 。 








[时 


EnhanceJS 测 试 通过 后 ， 它 会 为 每 一 个 指定 的 样式 表 各 创 | 到 
有 指定 的 文件 路 径 ， 然 后 将 它们 根据 列 出 顺序 添加 到 文档 头 部 : 


<head> 
<meta http-equiv="content-type" content="text/html;charset=UTF-8"> 
<title> 自 定义 输入 </title> 
<link href="css/basic.css" type="text/css" rel="stylesheet"> 
«script type="text/javascript" src="js/enhance.js"> </script> 
<script type="text/javascript"> 
// 运行 能 力 测试 
enhance({ 
1oadStyles: [ 
"Css/enhancements.css 
'css/enhancements2.css', 
'css/enhancements3.css" 


一 个 链接 元 素 ， 每 个 链接 元 素 带 


] 
]); 
</script> 
<link href="css/enhancements.css" rel="stylesheet" type="text/css"> 
<link href="css/enhancements2.css" rel="stylesheet" type="text/css"> 
<link href="css/enhancements3.css" rel="stylesheet" type="text/css"> 
</head> 
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1. 指定 样式 表 属 性 
可 以 用 许多 属性 对 样式 表 引 用 进行 限定 , 这 些 属 性 会 将 额外 的 意义 赋予 样式 表 。 下 面 列 出 了 
常用 的 属性 。 
> title 提 供 了 一 段 简短 的 样式 表 介 绍 ， 在 指定 备用 或 首选 地 位 时 则 是 必需 属性 。 
P media 让 样式 面向 某 种 特定 的 媒介 格式 ， 比 如 打印 、 屏 幕 ( 指 计算 机 屏幕 ) 或 手持 设备 。 
> rel 标 识 出 为 网 页 指定 的 文件 关系 。 它 的 默认 值 是 stylesheet， 不 过 还 可 以 指定 alternate 
stylesheet 来 赋予 某 个 样式 表 备用 地 位 。 



































注意 ”请 回顾 第 4 章 里 的 CSS 部 分 ， 那 部 分 更 加 详细 地 讨论 了 分 配 样式 表 属 性 的 最 佳 实践 。 








为 了 适应 具体 的 属性 ,loadstyles 选 项 还 接受 JavaScript 对 象 表 示 法 形式 的 样式 表 引 用 , 这 就 
意味 着 文件 路 径 和 所 有 额外 属性 要 用 逗号 分 隔 的 键 / 值 对 在 大 括号 里 指定 。 
举 个 例子 , 如 果 要 给 增强 版 网 页 附加 一 个 打印 样式 表 , 那么 引用 这 个 打印 样式 表 的 方法 是 提 
供 href 属 性 与 文件 路 径 ， 接 着 是 一 个 media 属 性 和 一 个 print 值 : 
enhance({ 
1oadStyles: [ 


'css/enhancements.css', 
{ href:'css/enhanced-print.css', media: 'print' } 























] 
)); 


2. 为 Internet Explorer 应 用 条 件 样 式 表 
Internet ExplorerF 有 一 些 独一无二 的 CSS 演 染 bug。 为 了 解决 它们 , 微软 公司 引入 了 条 件 注释 标签 ， 
利用 这 个 标签 ， 开发 者 可 以 创建 样式 ,使 这 些 样 式 只 针对 特定 (或 者 全 部 ) 版 本 的 Internet Explorer。 
我 们 在 EnhanceJS 里 保留 了 这 个 让 样式 表面 向 Internet Explorer 的 能 力 ， 方 法 是 提供 一 个 名 为 
iecondition 的 属性 , 它 可 以 传递 给 enhance 函 数 ， 并 附带 一 个 具体 的 版 本 号 (或 者 用 al1 这 个 值 来 
将 所 附 样 式 表 指向 全 部 版 本 的 下 浏览 器 )。 它 在 脚本 引用 里 的 表示 方法 非常 类 似 于 指定 样式 表 属 
性 的 方法 ,但 各 个 版 本 号 并 不 是 在 引号 里 列 出 : 
enhance({ 
1oadStyles: [ 
'css/enhancements.css', 
{ href:'css/ie-fixes.css', iecondition: 'all' }, 
{ href:'css/ie-6-fixes.css', iecondition: 6 } 


] 
}); 





6.3.2 载 入 额外 的 脚本 


EnhanceJS 测 试 通过 时 ， 可 以 指定 JavaScript 文 件 并 将 它们 附加 到 页 面 中 ,方式 基本 上 和 附加 
CSS 文 件 一 模 一 样 。 只 需 使 用 loadSscripts 选 项 并 编写 一 个 数组 , 将 一 个 或 多 个 由 逗号 分 隔 的 带 引 
号 文件 路 径 放 和 数组 即 可 : 
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enhance({ 
loadScripts: [ 
'js/jquery.js', 
'js/enhancements.js’ 
] 
}); 


EnhanceJS 会 根据 脚本 文件 的 指定 顺序 加 载 它们 ， 因 此 要 点 是 先 列 出 所 有 的 被 依赖 脚本 。 举 
个 例子 ， 当 你 引用 一 个 脚本 库 ( 比如 jQuery 或 YUI ) 时 ， 要 确保 首先 列 出 它 ， 这 样 EnhanceJS 就 能 
够 先 加 载 它 ， 然 后 再 加 载 那些 依靠 库 才能 正常 工作 的 自 定义 脚本 。 

如 果 脚 本 文件 之 间 没 有 依赖 关系 ， 就 可 以 加 速 这 个 加 载 过 程 ， 方 法 是 将 一 个 名 为 
queueLoading 的 选项 设 为 false。 这 么 做 会 禁用 默认 的 JavaScript 文 件 队 列 ， 或 者 说 顺序 加 载 ， 让 
多 个 脚本 可 以 同时 加 载 (在 浏览 器 允许 的 范围 内 )。 


6.3.3 ”上 自 定 义 体验 切换 链接 


默认 情况 下 ，EnhanceJS 会 向 网 页 底部 添加 一 个 链接 ， 让 用 户 可 以 手动 在 基本 体验 和 增强 体 
验 之 间 切 换 。 它 给 这 个 链接 指派 了 一 个 类 ( 默认 名 称 是 enhanced_toggleResult )， 使 得 用 CSS 修 
改 它 的 样式 , 或 者 用 额外 的 JavaScript 操 作 它 成 为 可 能 。 因为 这 个 类 名 在 基本 体验 和 增强 体验 里 是 
一 致 的 ， 所 以 可 以 将 下 面 的 样式 规则 添加 到 你 的 样式 表 里 ， 统 一 修改 它 的 外 观 样式 : 

.enhanced toggleResult { /* 这 里 放 修 改 切 换 链 接 样 式 的 CSS 代 码 */ } 

EnhanceJS 将 切换 链接 插入 body 元 素 的 尾部 , 但 是 你 可 以 将 这 个 链接 移动 到 网 页 的 其 他 位 置 ， 
方法 是 编写 并 加 入 一 小 段 脚 本 。 举 个 例子 ， 下 面 的 脚本 使 用 jQuery 语法 找到 切换 链接 ， 并 重新 将 
它 添加 到 网 页 的 另 一 个 元 素 之 中 ( 在 这 个 案例 里 是 一 个 id 为 myFooter 的 div 元 素 )， 如 图 6-3 所 示 。 

$(' .enhanced_ toggleResult ' ) .appendTo( 'div#myFooter ); 









































Lugelreigje 


Hello. We design engaging user interfaces for web 
applications, mobile devices and touchscreen kiosks 
that are simple and accessible to everyone. 











图 6-3 页面 底部 一 个 修改 了 样式 的 切换 按钮 ， 供 用户 “自愿 退出 ”增强 体验 
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切换 链接 的 文字 ( 就 是 用 户 在 网 页 上 看 见 并 点 击 的 文字 ) 也 可 以 调整 。 默 认 情 况 下 ， 基 本 版 
和 增强 版 网 页 里 的 链接 分 别 为 “查看 高 带宽 版 本 ”( View high-bandwidth version ) 和 “查看 低 带 
宽 版 本 ”( View low-bandwidth version )。 要 替换 这 些 用 语 ， 你 可 以 将 自 定义 文字 传递 给 
forceFailText 和 forcePassText 选 项 : 


enhance({ 

// 在 增强 体验 里 显示 : 

forceFailText: "View mobile site", 
// 在 基本 体验 里 显示 : 

forcepassText: "View enhanced site" 


}); 

禁用 切换 链接 

切换 链接 服务 于 一 个 重要 的 目的 , 即 当 某 种 体验 不 适合 用 户 时 为 他 们 提供 一 种 自愿 退出 的 方 
法 ， 同 时 也 适用 于 那些 愿意 拒绝 EnhanceJS 结 果 的 用 户 。 既 然 是 为 了 帮助 用 户 ， 那 么 我 们 永远 不 
会 建议 你 直接 删 掉 它 。 但 是 ， 如 果 你 愿意 使 用 另 一 种 方式 来 切换 基本 体验 和 增强 体验 ， 那么 
EnhanceJS 的 默认 切换 链接 是 可 以 隐藏 的 ， 以 防止 页 面 出 现 多 余 元 素 。 

为 了 阻止 EnhanceJS 插 入 这 个 链接 , 需要 在 配置 enhance 函 数 时 将 appendToggleLink 选 项 设 为 false: 























enhance({ 
appendToggleLink: false 


3 


6.3.4 强制 通过 或 不 通过 EnhanceJS 测 试 


EnhanceJS 将 通过 /未 通过 能 力 测试 的 结果 存储 在 一 个 cookie 里 ， 以 供 将 来 载 人 页 面 时 使 用 。 
你 可 以 操纵 这 个 结果 , 强制 网 页 加 载 基 本 体验 或 增强 体验 。 必 须 为 所 有 移动 设备 输出 一 个 单独 的 
“ 低 带 宽 ” 版 本 网 站 时 ， 就 是 操作 这 个 结果 的 一 个 时 机 。 

EnhanceJS 提 供 了 一 些 辅助 方法 来 简化 从 一 种 体验 到 另 一 种 体验 的 网 页 深 染 切换 。 使 用 这 些 
方法 时 要 小 心 〈 而 且 只 在 必要 时 使 用 )， 因 为 它们 会 绕 过 能 力 测试 。 

> TeTest 方 法 会 简单 地 删除 cookie 并 刷新 网 页 ， 使 测试 套件 重新 运行 ， 就 好 像 它 之 前 从 未 运 

行 过 一 样 。 
做 forceFail 方 法 将 cookie 的 值 设 为 fail 并 刷新 网 页 ， 不 应 用 任何 增强 信息 ( 即 基 本 体验 )。 
做 forcepass 方 法 将 cookie 的 值 设 为 pass 并 刷新 网 页 ,不 管 浏览 需 是 否 能 够 正确 浑 染 都 会 显示 
增强 信息 。 
要 在 你 自己 的 脚本 里 使 用 这 些 辅 助 方法 ， 首 先 要 将 通过 /未 通过 的 结果 储存 在 一 个 变量 里 。 
这 个 变量 储存 enhance 函 数 返 回 结果 的 一 个 引用 ， 可 以 用 它 来 调用 EnhanceJS 的 辅助 方法 : 


// 运 行 默 认 测 试 套件 
var myTest = enhance(); 










































































// 强 制 不 通过 之 前 的 测试 并 刷新 页 面 
myTest.forceFail(); 
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我 们 就 是 在 切换 链接 使 用 的 forceFail 和 forcepPass 方 法 中 使 用 这 种 方法 : EnhanceJS 给 每 个 切 
换 链接 都 绑 定 一 个 点 击 事件 ， 根 据 当 前 视图 里 的 体验 级 别 调用 适当 的 方法 。 


6.4 扩展 EnhanceJS 测试 套件 


EnhanceJS 的 默认 测试 套件 会 检查 一 些 有 代表 性 的 JavaScript 对 象 支持 和 CSS 尝 染 准确 度 。 但 
是 ， 你 正在 开发 的 项 目 有 可 能 需要 一 些 我 们 默认 不 会 测试 的 技术 ， 例 如 Flash 或 者 HTML5 里 的 
canvas 或 video 等 新 元 素 。 

我 们 将 EnhanceJS 能 力 测试 套件 构建 得 易于 定制 和 扩展 。 你 可 以 根据 需要 用 多 种 方式 来 修改 
测试 套件 : 利用 EnhanceJS 内 建 的 配置 选项 替换 或 添加 套件 里 的 测试 项 目 ; 创建 多 个 测试 实例 ， 
面向 特定 的 功能 或 能 力 ; 启用 alertonFailure 选 项 来 执行 大 规模 的 浏览 器 测试 方案 。 



































6.4.1 用 EnhanceJS 选 项 修改 测试 套件 


EnhanceJS 提 供 了 两 个 用 于 添加 测试 的 选项 : addTests 和 tests。 通 过 addTests 传 递 来 的 新 测 
试 会 添加 到 现 有 测试 套件 中 ; 传递 到 tests 选 项 里 的 测试 会 完全 取代 默认 的 测试 套件 。 

这 两 个 选项 都 接受 单个 值 , 用 对 象 格式 表示 ( 就 是 指 放 在 一 对 大 括号 里 的 测试 或 方法 集合 )。 
每 种 方法 都 代表 一 个 单项 测试 ， 并 应 该 有 一 个 有 意义 的 名 称 ( 比如 canvasSupport， 意 思 是 canvas 
支持 )， 后 接 一 个 冒号 和 一 个 普通 JavaScript 阴 数 ， 此 函数 必须 返回 一 个 true 或 false 值 ， 这 样 
EnhanceJS 才 能 正确 处 理 结果 。 这 个 集合 可 以 列 出 多 项 测试 ， 如 果 的 确 有 多 项 ， 它 们 之 间 应 该 用 
逗号 分 隔 : 

enhance({ 

addTests: { 


canvasSupport: function(){ 
return document.createElement('canvas').getContext; 














}, 
videoSupport: function(){ 

return !!ldocument.createElement('video').play; 
} 


中 

EnhanceJS 根 据 排列 顺序 依次 执行 每 一 项 测试 ， 如果 它 在 任何 一 处 遇 到 一 个 false 值 ， 就 会 设 
置 一 个 cookie 来 表示 测试 结果 为 未 通过 ， 并 且 给 基本 体验 添加 一 个 恰当 的 切换 链接 ; 如 果 所 有 测 
试 都 输出 了 一 个 true 值 ， 它 就 会 设置 一 个 测试 通过 的 cookie 并 增强 页 面 。 








6.4.2 ”创建 EnhanceJS 的 新 实例 或 多 个 实例 

EnhanceJS 对 能 力 测 试 采取 一 种 “ 非 全 有 即 全 无 ”( all-or-nothing ) 的 方式 : 套件 里 某 个 单项 
测试 未 通过 时 ， 测 试 就 停止 了 ，EnhanceJS 会 记录 下 一 个 未 通过 的 成 绩 。 但 是 ， 你 可 能 想 使 用 某 
种 功能 来 增强 网 页 ， 即 使 套件 里 的 其 他 测试 未 通过 ， 此 功能 也 能 在 浏览 器 里 成 功 运行 。 
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你 可 以 在 每 个 必须 进行 能 力 测试 的 网 页 上 创建 和 运行 多 个 EnhanceJS 实 例 ， 这 让 下 列 操作 成 
为 可 能 。 
> 脱离 主要 能 力 测试 套件 ， 单 独 测试 一 项 功能 (或 一 组 功能 )。 
> 修改 一 个 现 有 的 EnhanceJS 实 例 , 它 在 某 个 网 站 上 已 经 运行 了 一 段 时 间 。EnhanceJS 会 丢 下 
一 个 含有 通过 /未 通过 结果 的 永 不 过 期 的 cookie, 为 了 确保 某 项 功能 添加 进 现 有 系统 时 “ 重 
置 ”EnhanceJS， 让 它 忽 略 cookie 并 再 次 运行 ， 就 必须 创建 一 个 新 的 测试 副本 。 
每 个 EnhanceJS 实 例 都 必须 关联 一 个 独一无二 的 名 称 ， 默 认 分 配 的 名 称 是 enhanced。 要 创建 
一 个 新 的 EnhanceJS 实 例 ， 需 要 调用 enhance 函 数 ， 而 且 要 包括 一 个 新 的 testName 选 项 ， 名 称 的 值 
则 放 在 引号 里 。 


enhance({ 
testName: 'enhancedCanvas', 
loadScripts: [ 
'js/canvas-enhancements.js" 
] 
}); 
给 新 实例 取 名 时 ， 要 记 住 EnhanceJS 会 在 整个 框架 里 多 次 重复 使 用 这 个 名 称 ， 具 体会 用 于 : 
> 捕捉 通过 /未 通过 结果 的 cookie; 
> 添加 到 切换 链接 上 的 前 级 〈 就 像 enhanced_toggleResult ); 
> 测试 通过 时 指派 给 html 元 素 的 类 名 。 
另外， 每 一 个 EnhanceJS 实 例 都 会 将 一 个 新 的 体验 切换 链接 添加 到 页 面 上 ， 让 用 户 可 以 切换 
那个 特定 功能 的 基本 版 本 和 增强 版 本 。 就 这 一 点 而 言 ,你 应 该 调整 它 的 样式 或 位 置 , 使 它 和 那个 
功能 一 起 出 现 , 这 样 它 就 不 会 和 用 来 切换 网 页 其 余部 分 的 链接 混淆 。 举 个 例子 , 你 可 能 会 单独 运 
行 EnhanceJS 的 一 个 实例 ， 将 某 个 表格 替换 成 根据 它 的 数据 生成 的 、 基 于 canvas 的 图 表 。 这 种 独 
特 增强 所 用 的 切换 链接 应 该 放 在 图 表 下 面 ， 用 “查看 表格 数据 ”作为 链接 文字 。 


6.4.3 ”为 调试 开启 能 力 测试 警告 


开发 和 添加 你 自己 的 能 力 测试 时 ， 了 解 哪 一 项 测试 导致 某 个 特定 浏览 器 出 错 是 很 有 帮助 的 。 
EnhanceJS 提 供 alertOnFailure 选 项 就 是 为 了 这 个 目的 。 将 这 个 选项 设置 为 true 后 ， 如 果 发 后 测试 
失败 的 事件 ， 脚 本 就 会 弹出 一 个 JavaScript 和 警告 : 


enhance({ 
alertOnFailure: true 


}); 
请 记 住 ，alertonFailure 选 项 只 该 用 在 测试 环境 里 ( 绝 不 要 用 于 实际 网 站 )， 因 为 它 可 能 会 
在 未 通过 测试 的 浏览 器 里 弹出 警告 ， 影响 用 户 体验 。 
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为 什么 EnhanceJS 使 用 alert() 而 非 控制 台 日 志 

对 许多 开发 者 来 说 , 控制 人 台 日 志 工 具 ( 比如 火狐 浏览 器 的 Firebug 桂 件 ) 是 在 该 浏览 器 上 
调试 脚本 时 的 首选 ， 因 为 它们 的 功能 更 齐全 也 更 健壮 。 但 是 ,不 是 所 有 浏览 器 都 支持 控制 台 
调试 。 

我 们 发 现 JavaScript 原 生 的 alert 方 法 ,能 在 各 种 各 样 的 新 老 浏 览 器 里 最 清楚 地 显示 出 在 何 
时 何 处 测试 未 能 通过 。 它 能 在 几乎 所 有 启用 JavaScript 的 浏览 器 里 触发 ， 而 且 还 支持 使 用 
BrowserShots ( http://browsershots.org ) 等 有 用 的 工具 ， 此 工具 能 在 各 种 各 样 的 浏览 器 里 测试 网 
页 ， 尤 其 会 显示 出 测试 是 在 哪个 位 置 失败 的 。 


6.5 在 服务 器 上 优化 EnhanceJS 


EnhanceJS 框 架 的 脚本 在 能 力 测试 通过 时 有 条 件 地 载 入 样式 和 脚本 增强 信息 ， 这 个 过 程 可 以 
得 到 很 大 优化 ， 方 法 是 使 用 服务 器 端 语言 ( 比如 PHP 、Ruby 或 Python )， 根 据 浏 览 器 上 存储 的 通 
过 /未 通过 结果 输出 优化 过 的 网 页 。 
这 一 过 程 的 工作 方式 如 下 : 在 网 页 标记 里 不 再 编写 对 enhance.js 的 引用 和 调用 enhance 函 数 的 
脚本 代码 块 ， 而 是 在 网 页 的 head 里 放置 一 个 检查 EnhanceJS cookie 的 服务 器 端 包含 引用 。 当 用 户 
在 他 们 的 浏览 器 里 载 和 人 网 页 时 ， 会 发 生 以 下 这 些 事情 中 的 一 件 。 
做 如 果 cookie 不 存在 ( 或 是 因为 浏览 器 之 前 从 未 载 人 过 这 个 网 页 ,或 是 因为 它 不 支持 cookie )， 
就 随 网 页 输出 所 有 必需 的 EnhanceJS 脚 本 ， 在 客户 端 执 行 能 力 测 试 和 应 用 增强 。 
> 如 果 cookie 存 在 且 等 级 是 通过 ， 就 随 网 页 输出 增强 信息 ， 包 括 html 元 素 的 enhanced 类 、 
对 额外 CSS 和 JavaScript 文 件 的 引用 , 以 及 体验 切换 链接 。 网 页 到 达 浏 览 器 时 已 经 准备 就 
绪 ， 所 以 不 必 进 行 客户 端的 文件 载 入 工作 。 在 这 种 情况 下 ,服务器 端的 脚本 还 提供 了 一 
种 优化 过 的 方式 ， 将 增强 标记 添加 到 页 面 中 ， 之 前 则 需要 用 客户 端 JavaScript 在 测试 通 
过 时 插入 。 

> 如 果 cookie 存 在 且 等 级 是 未 通过 ， 就 以 基本 形式 输出 网 页 , 包括 基础 标记 和 一 个 基本 样式 
表 , 没有 任何 JavaScript。 在 这 种 情况 下 , 体验 切换 链接 仍然 会 如上，, 不 过 不 是 用 JavaScript 
来 切换 体验 ， 而 是 指向 一 个 执行 相同 功能 的 服务 器 端 脚 本 。 


















































注意 要 了 解 EnhanceJS 服 务 器 端 配置 的 更 多 信息 和 范例 代码 ， 请 访问 EnhanceJS 项 目的 网 站 : 
http://enhancejs.googlecode.com。 


我 们 概述 了 所 有 需要 的 基本 工具 和 方法 , 这 样 你 就 能 在 所 有 项 目 上 应 用 渐进 增强 方法 , 并 有 
效 地 进行 能 力 测 试 以 确保 普遍 可 访问 性 。 本 书 第 二 部 分 会 逐步 介绍 12 个 范例 , 展示 如 何 应 用 这 些 
技巧 ， 构 建 能 在 真实 项 目 里 见 到 的 可 访问 组 件 。 
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渐进 增强 实战 


用 渐进 增强 方法 构建 组 件 
可 折 县 内 容 
标签 页 
工具 提示 
树 形 控件 
HTML5S canvas 图 表 
对 话 框 和 登 加 层 
按钮 
复 选 框 、 单 选 按钮 和 星 级 评分 
请 块 
下 拉 菜 单 
列表 生成 器 
文件 输入 控件 


用 渐进 增强 方法 构建 组 件 











用 渐进 增强 方法 构建 网 站 和 应 用 程序 时 , 重要 的 一 点 是 要 用 X 光 透视 来 判断 基本 体验 和 增强 
体验 如 何 协 同 工 作 ，, 然后 依照 可 访问 性 的 最 佳 实践 编写 标记 、CSS 和 JavaScript， 从 而 向 最 广泛 的 
浏览 器 和 设备 提供 尽 可 能 优秀 的 体验 。 

不 过 , 首次 组 合 使 用 这 些 最 佳 实践 可 能 令 人 生 鞭 。 所以, 这 一 部 分 会 通过 细节 丰富 的 范例 一 
步 步 带 你 遍历 12 个 常用 的 交互 组 件 〈 例如 标签 页 控件 、 滑 块 、 数 据 图 表 和 对 话 框 )， 并 向 你 展示 
如 何 根 据 我 们 的 渐进 增强 流程 来 构建 它们 。 

在 深入 代码 范例 之 前 , 我 们 会 花 一 些 时 间 大 致 介绍 构建 这 些 组 件 时 遵循 的 大 体 编程 方式 , 总 
体 介绍 涉及 的 组 件 ， 并 描述 在 这 部 分 的 各 章 里 你 将 会 见 到 的 组 织 结构 。 


7.1 组 件 是 如 何 编写 的 


用 HTML 、CSS 和 JavaScript 标 记 一 张 网 页 有 好 几 种 合法 方式 。 接 下 来 几 章 使 用 标准 的 方式 和 
语法 ， 它 们 的 文档 丰富 且 易 于 理解 。 
对 基础 标记 而 言 ， 我 们 使 用 XHTML 语法 ， 因 为 我 们 发 现 它 的 规则 严格 而 明确 ( 比如 ， 所 有 
元 素 的 标签 都 要 关闭 ， 所 有 属性 都 要 加 上 引号 )， 因 此 它 易 于 阅读 和 复制 。 
我 们 使 用 的 元 素 主要 来 自 最 新 的 HTML 正 式 规范 : HTML4.01。 我 们 认为 它 是 “安全 ”的 
HTML， 因 为 自 1998 年 4 月 获得 批准 后 ， 这 部 规范 在 绝 大 部 分 移动 和 桌面 浏览 器 上 得 到 了 支持 ， 
包括 运行 在 游戏 系统 和 家 用 游戏 机 上 那些 更 “创新 ”的 浏览 器 。 同 样 重 要 的 是 ,范例 里 用 到 的 所 
有 元 素 在 下 一 部 HTML 规范 (HTMLS ) 中 会 继续 得 到 支持 ， 因 此 这 个 标记 既是 向 后 兼容 的 , 也 是 
向 前 兼容 的 。 
写作 本 书 时 ，HTML5S 规 范 还 处 于 草案 阶段 。 虽 然 它 尚未 完全 获得 批准 ， 我 们 还 是 在 组 件 范 
例 里 使 用 了 许多 HTMLS 的 元 素 和 属性 ， 它 们 可 以 归 为 两 大 类 。 
> 一 些 属性 ( 例如 输入 元 素 的 type= number 和 data 前 绥 ) 能 够 增加 信息 ， 可 以 用 它们 实现 更 
加 智能 的 增强 体验 ， 给 标记 整体 增加 语义 价值 。 同 时 ， 它 们 或 者 能 被 不 理解 它们 的 浏览 
器 安全 忽略 ， 或 者 有 内 建 的 备用 HTMIL4 元 素 。 在 基础 标记 里 使 用 它们 是 安全 的 。 

> 一 小 组 HTML5 功 能 (例如 canvas 和 video 元 素 ) 提供 了 健壮 且 基 于 标准 的 功能 性 ， 很 可 能 
会 加 入 正式 的 HTML 候 选 建议 稿 , 而 且 已 经 被 一 些 当 代 浏 览 器 采用 。 在 接 下 来 的 组 件 范例 













































































7.2 在 组 件 各 章 里 导航 111 








里 ， 我 们 建议 现在 就 在 你 的 项 目 里 使 用 其 中 的 许多 功能 ， 我 们 也 会 演示 怎样 做 能 达到 最 
好 的 效果 。 


注意 要 了 解 更 多 信息 ， 请 查阅 HTML4.01 规 范 (www.w3.org/TR/html4 )，HTML4.01 指 定 的 元 
素 列 表 ( www.w3.org/TR/REC-html40/index/elements.html )， 以 及 HTML4.01 和 HTMIL5 之 
间 的 区 别 ( http://dev.w3.org/html5/html4-differences )。 














WALARIA 1.0 规 范 在 写作 本 书 时 也 仍 是 草案 ， 但 已 经 在 一 些 最 为 流行 的 屏幕 阅读 软件 套装 
里 得 到 了 良好 支持 。 我 们 在 基本 体验 和 增强 体验 的 标记 里 都 大 量 应 用 了 WAI-ARIA 可 访问 性 的 属 
性 ， 帮 助 确保 代码 能 被 辅助 技术 充分 理解 ， 并 且 处 在 一 个 良好 的 位 置 迎接 未 来 的 可 访问 性 进展 。 

所 有 组 件 范例 都 使 用 最 新 的 CSS 规 范 : CSS 2.1 ( www.w3.org/TR/CSS2 ) 里 指定 的 样式 属性 。 
只 要 有 可 能 ， 我 们 会 加 入 下 一 个 修订 版 (通常 称 为 CSS3 ) 提议 的 那些 较 新 的 属性 ， 例 如 用 于 圆 
化 边 角 的 border-radius 或 是 制造 阴影 效果 的 text-shadow ( www.w3.org/Style/CSS/current- 
work#CSS3 )。 目 前 ， 很 多 这 些 属性 只 能 在 一 部 分 现代 浏览 器 里 正确 渲染 ， 包 括 最 新 版 的 火狐 浏 
览 右 、Safari 以 及 Opera。 在 那些 不 支持 它们 的 浏览 器 里 ， 它 们 会 被 忽略 ， 因 此 可 以 放心 地 将 它们 
用 于 增强 样式 ， 因 为 我 们 知道 它们 没有 害处 。 

最 后 ， 我 们 的 脚本 范例 基于 jQuery JavaScript 库 。 这 个 开源 库 包 含 许多 有 用 的 JavaScript 属 性 
和 方法 ， 可 写 出 非常 简洁 却 又 强大 的 函数 。 使 用 jQuery 是 因为 它 的 选择 器 和 方法 的 语法 〈 它 在 定 
位 和 操作 具体 DOM 元 素 方面 的 惯例 ) 特别 易 读 ， 而 且 能 够 快速 传达 特定 脚本 行为 背后 的 逻辑 。 
jQuery 库 的 文档 包含 了 可 接受 的 选择 器 和 可 用 方法 的 完整 参考 ， 它 在 jquery.com 上 进行 维护 。( 大 
曝光 : Filament 集 团 是 jQuery UI 组 件 库 的 积极 贡献 者 ， 并 作为 一 个 整体 加 入 jQuery 领导 小 组 。) 


7.2 在 组 件 各 章 里 导航 


本 书 这 一 部 分 的 每 一 章 都 涵盖 一 个 具体 的 组 件 范例 , 只 要 有 可 能 , 我 们 还 会 分 析 该 组 件 的 常 
见 变 体 。 组 件 各 章 根 据 其 主要 目的 分 为 两 组 。 
P 前 六 章 展示 了 内 容 组 织 组 件 ( content organization widget )， 它 们 排列 网 页 上 的 信息 ， 使 其 
可 以 被 选择 性 地 显示 /隐藏 (可 折 对 内容、 标签 页 、 工 具 提 示 、 对 话 框 和 树 ), 或 者 作为 数 
据 可 视 化 方式 进行 显示 (图 表 )。 
P> 接 下 来 六 章 展 示 了 数据 输入 和 提交 组 件 (data input and submission widget )， 它 们 能 提供 更 
便捷 〈 而 且 经 常 也 是 更 高 效 ) 的 方式 收集 用 户 输入 (按钮 、 自 定义 复 选 框 和 单 选 按钮 、 
滑 块 、 列 表 生 成 器 、 下 拉 菜 单 和 自 定义 文件 输入 )。 
每 一 章 大 致 遵循 一 种 格式 : 用 X 光 透视 分 析 组 件 的 目标 设计 ， 将 功能 部 件 映射 到 标准 HTML 
元 素 上 ， 然 后 编写 基础 标记 ， 应 用 安全 样式 ， 闪 加 上 样式 和 脚本 增强 信息 。 
构建 每 种 组 件 时 , 我 们 会 遵循 一 些 关 键 原则 , 从 而 确保 基本 体验 和 增强 体验 都 能 实现 恰当 的 
功能 ， 而 且 让 那些 使 用 屏幕 阅读 器 、 移 动 设备 和 桌面 浏览 器 等 方式 的 用 户 都 能 够 访问 。 
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> 我 们 一 开始 总 是 将 语义 化 HTML 用 于 基础 标记 , 并 且 合 乎 逻辑 地 定义 有 效 属性 。 如 果 目 标 
设计 人 允许， 我 们 会 在 将 这 一 标记 用 于 基本 体验 的 同时 ， 把 它 当 做 一 切 样 式 和 脚本 增强 的 
起 点 。 而 且 ， 只 要 有 可 能 ， 我 们 还 会 将 它 作 为 内 容 来 源 使 用 ， 帮 助 配置 某 个 增强 组 件 。 

> 为 了 确保 每 一 种 增强 体验 都 能 像 作为 其 基础 的 原生 标记 那样 完全 可 访问 ， 我 们 加 入 了 
ARIA 属 性 、 键 盘 访问 能 力 ， 以 及 其 他 基于 现 有 先例 ( 相似 的 表单 控件 、 桌 面 电 脑 惯 例 或 
者 WCAG 指 导 方 针 ) 的 用 户 期 望 行为 。 另 外 ， 建 议 使 用 VoiceOver 、NVDA 、WindowEyes 
和 JAWS 等 屏幕 阅读 需 进 行 详 尽 测试 。 

在 数据 输入 和 提交 组 件 方面 ,我们 会 特别 小 心 ， 总 是 从 一 个 可 工作 的 HIML 表 单 控件 起 步 ， 
确保 在 没有 任何 CSS 或 JavaScript 增 强 时 ,此 组 件 也 能 按 需 工作 , 并 且 可 由 任意 设备 上 的 所 有 用 户 
访问 。 我 们 只 会 添加 必要 的 增强 信息 ， 让 此 元 素 的 外 观 和 行为 像 一 个 样式 丰富 的 控件 ， 而 不 会 改 
变 用 户 与 它 的 交互 方式 。 举 个 例子 ,第 15 章 会 展示 如 何 使 用 标准 的 input 和 1abel 元 素 加 上 CSS 和 
最 少量 的 JavaScript， 定 制 复 选 框 和 单 选 按钮 元 素 。 

如 果 不 能 增强 某 个 标准 表单 控件 , 我 们 会 确保 增强 组 件 ( 无 论 它 是 与 原来 的 表单 元 素 协同 工 
作 ， 还 是 在 用 户 体 验 里 完全 取代 后 者 ) 总 是 与 用 于 提交 数据 的 原生 输入 元 素 保 持 不 间断 的 联系 。 
我 们 通过 编写 “代理 ”联系 脚本 实现 这 一 点 : 无 论 何 时 ,只 要 基本 的 原生 表单 控件 或 者 增强 的 自 
定义 组 件 改 变 了 数值 ， 这 个 脚本 就 会 捕捉 到 用 户 输入 并 更 新 男 一 个 组 件 ， 使 它们 不 断 保持 同步 。 
为 了 确保 与 后 端的 服务 器 逻辑 实现 最 简单 最 干净 的 集成 , 我 们 总 是 会 将 最 初 的 原生 表单 元 素 留 在 
标记 里 ， 用 来 提交 表单 数据 。 

运行 操作 网 页 元 素 的 脚本 增强 时 , 我 们 会 在 标记 准备 就 绕 后 立即 开始 , 这 样 增强 体验 就 可 以 
无 颖 地 显示 出 来 , 还 能 避免 在 元 素 存 在 前 运行 脚本 所 产生 的 错误 。 为 此 , 我 们 使 用 jQuery 的 ready 
方法 。 除 非 另 有 说 明 ， 可 以 假定 组 件 各 章 中 所 有 与 DOM 有 关 的 代码 都 在 这 个 ready 方 法 内 调用 。 
(第 5 章 详细 分 析 了 ready 方 法 。) 


7.3 可 下 载 的 范例 代码 


在 接 下 来 的 12 章 里 , 我 们 为 每 一 种 组 件 都 开发 了 标记 、 样 式 和 插件 脚本 ( 用 于 试验 和 在 你 的 
项 目 里 使 用 )。 每 一 章 最 后 提供 了 具体 的 操作 说 明 或 提示 ， 方 便 读 者 下 载 与 使 用 组 件 范 例 里 所 描 
述 代码 的 功能 完备 版 本 。 本 书 所 有 代码 都 可 以 在 www.filamentgroup.com/dwpe 里 找到 。 

所 有 代码 和 插件 都 是 开源 的 ， 在 MIT 开 源 协议 用 于 商业 和 非 商 业 用 途 ( www.opensource.org/ 


licenses/mit-license.php )。 
































































































































第 8 章 


可 折 倒 内 容 








网 站 和 Web 应 用 程序 的 复杂 程度 一 直 在 增加 , 设计 师 们 经 常会 决定 选择 性 隐藏 和 显示 屏幕 上 
的 内 容 , 这 有 既 可 能 是 根据 用 户 的 操作 渐进 显示 , 也 可 能 是 将 内 容 放 在 可 折 县 的 块 里 ， 让 用 户 可 以 
选择 开启 和 关闭 它们 。 

这 种 让 用 户 选择 性 切换 其 显示 状态 的 内 容 块 有 无 数 种 常用 设计 形式 , 它们 的 名 字 则 更 多 , 仅 
举 几 例 : 可 折 有 登 的 ( collapsibles )、 转 下 来 的 ( spin-downs )、 切 换 面 板 ( toggle panels )、 卷 绕 的 
( twisties ) 和 内 容 展 开 (content disclosures )。 可 折 盖 内 容 在 许多 场合 都 很 有 用 。 

> 某 些 细节 信息 不 必 一 直 显 示 或 对 所 有 用 户 显 示 ， 但 在 特定 情况 下 可 能 有 用 ， 比 如 描述 某 














个 技术 问题 的 文档 。 

> 表单 里 的 可 选 字段 ， 比 如 注册 表单 里 的 用 户 偏好 设置 ， 或 是 电子 商务 结账 工作 流 里 的 礼 
品 包 装 选 项 。 

> 仿 桌 面 样式 Web 应 用 程序 里 的 工具 面板 或 分 组 调 色 面板 ,用 户 可 以 选择 折 闭 或 展开 某 些 元 
素来 优化 屏幕 空间 。 





在 可 折 炙 组 件 里 展示 内 容 时 ， 常 用 的 最 佳 实践 是 显示 一 个 视觉 指示 器 ( 比如 箭头 或 加 / 减 号 
图 标 )， 并 附带 一 个 可 点 击 的 标签 或 其 他 元 素 ， 让 用 户 明白 有 额外 的 内 容 可 用 。 

另 一 个 重点 是 ,要 确保 选择 性 隐藏 的 内 容 对 屏幕 阅读 器 仍然 是 可 访问 的 , 方法 是 添加 恰当 的 
ARIA 属 性 ， 支 持 键 盘 访问 ， 以 及 使 用 最 佳 的 CSS 属 性 正确 管理 可 视 性 。 本 音 会 讨论 如 何 用 可 访 
间 的 方式 构建 可 折 炙 内 容 。 


8.1 久光 透视 


我 们 考虑 一 个 经 常用 到 可 折 县 内 容 的 案例 : 技术 错误 的 反馈 消息 。 在 我 们 的 照片 管理 需 网 站 
里 ， 当 用 户 上 传 完 一 批 照 片 后 ， 可 能 显示 一 个 反馈 面板 ， 总 结 遇 到 的 问题 数量 ， 并 以 简单 、 紧 次 
的 格式 提供 具体 上 传 问题 的 细节 ， 如 图 8-1 所 示 。 

对 那些 有 兴趣 了 解 哪些 照片 存在 问题 以 及 出 现 了 什么 具体 问题 的 用 户 , 我 们 会 提供 一 个 “ 详 
细 信 息 ”( Details ) 标题 ， 点 击 后 会 展开 一 个 面板 ， 里 面 显示 照片 问题 的 完整 列表 。 为 了 指明 这 
个 “详细 信息 ”标题 能 够 显示 出 更 多 内 容 ， 我 们 将 一 个 小 箭头 放 在 它 的 左边 。 面 板 展开 时 ， 这 个 
第 头 的 方向 就 变 成 朝 下 了 ， 如 图 8-2 所 示 。 


























A Upload: 2 issues 


The rest of your photos were uploaded successfully but 2 photos 
were not uploaded because they are not a supported format. 


P Details 





标 设计 


图 8-1 ”细节 面板 折 秋 时 的 





A Upload: 2 issues 


The rest of your photos were uploaded successfully but 2 photos 
were not uploaded because they are not a supported format 


¥ Details 
EN\ purple-flower.tif Not a supported file forrmat 
国人 flower-photos zip Not a supported file formot 








图 8-2 ”细节 面板 展开 时 的 目标 设计 


用 X 光 透视 查看 这 个 可 折 和 详细 信息 面板 时 , 我 们 注意 到 面板 里 提供 的 细节 内 容 可 能 对 基本 
体验 里 的 用 户 是 必要 的 , 能 让 他 们 明白 接 下 来 该 怎么 做 。 因 此 ,要 确保 它 被 完整 包括 在 基础 标记 
里 。 而 在 增强 体验 里 ， 默认 会 用 JavaScript 和 CSS 隐 藏 内 容 ， 并 添加 箭头 图 标 和 点 击 行为 ， 在 用 户 
点 击 “ 详 细 信息 ”标题 时 展开 或 折 受 内 容 。 

基础 标记 里 有 一 个 要 点 需要 考虑 :“ 详 细 信息 ”扮演 的 是 可 折 爱 组 件 的 标题 这 一 角色 ， 因 此 
它 应 该 被 标记 为 一 个 标题 元 素 ( hz )， 以 利用 这 种 标题 代表 的 意义 。 

除 此 之 外 , 可 折 笃 面板 里 的 元 素 可 以 采用 任何 语义 化 HTML 的 格式 。 在 这 个 案例 里 ， 每 一 行 
只 包含 了 两 项 数据 : 文件 名 (我 们 会 把 图 标 做 成 背景 图 像 ) 和 问题 描述 ,格式 也 非常 简单 ， 因 此 
可 以 使 用 一 张 无 序 列表 使 标记 轻 量 化 。 把 问题 描述 放 在 一 个 强调 标签 (em ) 里 ， 就 可 以 用 CSS 使 
它 浮动 到 右 侧 , 从 而 符合 我 们 的 设计 , 如 图 8-3 所 示 。( 如 果 细 节 数 据 包含 了 任何 额外 的 数据 字段 ， 
或 者 添加 解释 性 的 表 头 会 更 好 ， 那 么 我 们 很 可 能 将 它 标 记 为 一 张 表 格 。) 




















Upload: 2 issues 


The rest of your photos were uploaded successfully but 2 photos 
were not uploaded because they are not a supported format 


Details 


® purple-flower.tif 

Not a supported file format 
® flower-photos.zip 

Not a supported file format 











图 8-3 ”基本 体验 显示 所 有 可 折 和 又 的 内 容 ， 因 此 是 可 访问 的 
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增强 版 标记 和 脚本 必须 包括 一 些 重要 的 可 访问 性 功能 , 以 确保 它 遵 循 为 屏幕 阅读 器 用 户 服务 
的 最 佳 实践 标准 。 
使 用 屏幕 阅读 器 的 用 户 在 页 面 朗读 时 希望 : 阅读 展开 的 内 容 , 跳 过 折合 的 内 容 。 为 了 避免 朗 
读 折 县 的 内 容 ， 我 们 会 在 增强 版 CSS 里 用 display: none 隐 藏 它 ， 并 在 DOM 里 给 它 加 上 
aria-hidden="true" 标 记 。 
这 种 隐藏 折 生 内 容 的 方式 是 可 行 的 , 前 提 是 告知 屏幕 阅读 器 用 户 该 内 容 的 存在 , 并 提供 一 种 
访问 它 的 方法 。 增 强 脚 本 会 对 “详细 信息 ”标题 做 一 点 必要 的 标记 改动 。 
> 此 标题 需要 一 些 提示 ， 让 用 户 知道 它 包 含 更 多 内 容 。 为 了 提供 明确 的 操作 说 明 ， 脚 本 会 
在 标题 文字 前 插入 一 个 span, 检测 可 折 炙 面板 当前 的 状态 , 在 内 容 折 县 时 加 入 文本 “显示 ” 
(Show )， 展 开 时 则 加 入 文本 “隐藏 ”( Hide。 请 注意 文本 后 面 的 空格 ， 它 让 屏幕 阅读 需 暂 
停 一 下 再 朗读 标题 文字 )。 屏 幕 阅读 器 会 读 出 更 具 描 述 性 的 “显示 详细 信息 ”或 “隐藏 详 
细 信 息 ”, 解释 用 户 点 击 后 会 发 生 什么 。 这 些 span 元 素 会 用 可 访问 的 方式 隐藏 到 屏幕 之 外 ， 
这 样 在 网 页 上 就 看 不 见 它们 了 。 
> 此 标题 必须 能 够 获得 键盘 焦点 。 脚 本 会 用 一 个 锚 元 素 (a ) 围 住 标题 标签 里 的 文字 ， 这 样 
当 用 户 按 下 Tab 键 时 就 能 导航 到 它 上 面 。 
我 们 已 经 充分 了 解 了 如 何 构建 基本 体验 和 增强 体验 ， 因 此 可 以 着 手 编写 基础 标记 和 样式 了 。 


8.2 ”创建 可 访问 的 可 折 又 内容 


创建 在 基本 体验 和 ( 用 屏幕 阅读 器 访问 的 ) 增强 体验 里 完全 可 访问 的 可 折 肥 内容 组 件 , 是 一 
个 相当 简单 的 过 程 。 

在 接 下 来 的 代码 攻略 里 ， 我 们 会 特别 关注 可 点 击 标题 和 目标 设计 里 的 可 折合 部 分 ， 如 图 8-4 
所 示 。 

































































VW Details 
因 \ purple-flower.tif Not a supported file formoat 
Wi\ flower-photos.zip Not o supported file forrmoat 














图 8-4 目标 设计 里 的 可 折 炙 部 分 





8.2.1 基础 标记 和 样式 


可 折 炙 面板 的 基础 标记 很 简单 ， 就 是 一 个 标题 后 面 跟 着 一 张 无 序列 表 。 在 每 一 个 列表 项 里 ， 
问题 描述 被 放 在 一 个 强调 标签 内 ， 和 文件 名 区 分 开 : 


<h2>Details</h2> 
<ul> 
<li>purple-flower.tif <em>Not a supported file format</em></1i> 
<l1i>flower-photos.zip <em>Not a supported file format</em></1i> 
</ul> 
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在 基本 样式 表 里 , 我 们 会 在 body 标 签 上 设置 字体 ， 并 给 每 个 em 元 素 添加 display: block 样 式 ， 
让 问题 描述 单独 占 一 行 : 


body { font-family: "Segoe UI", Arial, sans-serif; } 
ul li em { display: block; } 


在 基本 体验 里 ， 所 有 内 容 在 任何 时 候 都 可 见 , 没有 折 丢 行为 。 应 用 安全 样式 后 它 变 得 易于 阅 
读 ， 并 被 组 织 成 一 种 清晰 的 视觉 层级 ， 如 图 8-5 所 示 。 











Details 


® purple-flower.tif 

Not a supported file format 
® flower-photos.zip 

Not a supported file format 























图 8-5 ”应 用 安全 样式 后 的 基本 体验 











8.2.2 ”增强 标记 和 样式 


要 在 增强 体验 里 给 展开 和 折 针 状态 添加 样式 , 我 们 需要 确定 脚本 将 要 应 用 到 标记 上 的 类 , 用 
来 添加 样式 及 启用 显示 和 隐藏 行为 。 

“详细 信息 ”标题 被 指派 了 一 个 collapsible-heading 类 , 内 容 里 的 山 则 被 指派 了 collapsible- 
content 类 。 这 些 类 用 于 定义 展开 状态 的 外 观 : 将 标题 箭头 图 标的 方向 指向 下 方 ， 以 及 使 细节 内 
容 在 屏幕 上 可 见 : 


<h2 class="collapsible-heading">Details</h2> 
<ul class="collapsible-content"> 
<li>purple-flower.tif <em>Not a supported file format</em></1i> 
<li>flower-photos.zip <em>Not a supported file format</em></1i> 
</ul> 


用 户 点 击 标题 来 隐藏 细节 内 容 时 ， 脚 本 会 给 标题 添加 一 个 collapsible-heading-collapsed 
类 ， 以 将 箭头 图 标 换 成 指向 右 方 ， 之 后 给 列表 添加 一 个 collapsible-content-collapsed 类 ， 让 它 
在 屏幕 上 隐藏 起 来 ， 并 且 对 大 多 数 屏幕 阅读 需 也 隐藏 起 来 。 脚 本 还 会 更 新 aria-hidden 属 性 进行 
匹配 : 


<h2 class="collapsible-heading collapsible-heading-collapsed">Details</h2> 
<ul class="collapsible-content collapsible-content-collapsed" aria-hidden= 


"true"> 
<li>purple-flower.tif <em>Not a supported file format</em></1i> 
<li>flower-photos.zip <em>Not a supported file format</em></1i> 


</ul> 
X 光 部 分 提 到 ， 这 个 标题 需要 额外 的 标记 使 它 可 以 用 键盘 导航 访问 ， 以 及 为 屏幕 阅读 器 提供 


上 下 文 环境 的 操作 说 明 。 
首先 ， 我 们 用 一 个 带 有 collapsible-heading-toggle 类 的 链接 围 住 标题 文字 ， 这 样 它 就 可 以 
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被 键盘 用 户 访 问 到 。 添 加 一 个 名 为 button 的 ARIA 角 色 ， 则 可 以 在 能 理解 新 型 ARIA 标 记 的 浏览 
里 标明 此 元 素 的 作用 : 


<h2 class="collapsible-heading"> 
<a class="collapsible-heading-toggle" href="#" role="button">Details</a> 
</h2> 


脚本 还 会 在 文字 前 插入 一 个 带 有 collapsible-heading-status 类 的 span， 我 们 用 它 为 屏幕 阅 
读 融 用户 提供 操作 说 明 。 脚 本 还 会 包含 一 套 逻 辑 ， 根 据 可 折 秋 面板 的 状态 输出 恰当 的 span 文 字 。 
<h2 class="collapsible-heading"> 
<a class="collapsible-heading-toggle" href="#" role="button"> 
<span class="collapsible-heading-status">Hide </span> 


Details</a> 
</h2> 


当 内 容 展开 以 及 链接 获得 焦点 时 ， 屏 幕 阅读 器 会 将 此 链接 读 作 “ 隐 藏 详细 信息 ”: 


<h2 class="collapsible-heading collapsible-heading-collapsed"> 
<a class="collapsible-heading-toggle" href="#" role="button"> 
<span class="collapsible-heading-status">Show </span> 
Details</a> 

</h2> 


确定 标记 和 类 名 之 后 ， 我 们 可 以 为 其 编写 增强 样式 规则 ， 将 必要 的 样式 应 用 到 组 件 上 。 

首先 , 我 们 会 在 增强 样式 表 里 设置 一 个 全 局 字体 大 小 , 这 样 做 会 简化 我 们 设置 组 件 内 各 元 素 
字体 大 小 的 工作 。 我 们 会 赋予 body 元 素 一 个 font-size 属 性 ， 以 “ 重 置 ”标准 的 浏览 器 默认 字体 
大 小 。 

我 们 在 设置 字体 大 小 时 喜欢 使 用 相对 式 的 em 单位 ,这样 用 户 通 过 浏览 絮 的 “首选 参数 ”设置 

和 键盘 命令 ,能 更 容易 地 把 文字 调整 到 自己 喜欢 的 大 小 。 大 多 数 浏 览 器 的 基准 字体 大 小 是 16 像 素 。 

通过 将 body 字 体 大 小 设置 成 16 像 素 的 62.5%， 我们 实际 上 将 单个 em 单位 ( 1em )“ 重 置 ” 为 10 像 素 : 
body { font-size: 62.5% } 

为 基准 字体 大 小 被 设置 成 百分比 的 形式 , 所 以 任何 指定 的 em 都 会 简单 地 转换 成 倍数 ( 1.5 em 
等 于 15 px，2.2 em 则 是 22 px， 以 此 类 推 )， 这 会 大 大 减少 计算 每 种 元 素 文字 大 小 的 需要 ， 还 能 够 
保持 可 伸缩 性 ,适合 那些 修改 了 默认 大 小 或 者 使 用 键盘 命令 (例如 Ctrlt 或 Ctrl- ) 即时 调整 大 小 的 
用 户 。 








































































































致谢 
这 种 基于 百分比 的 字体 大 小 解决 方案 灵感 来 源 于 Richard Rutter 的 文章 。 他 在 2004 年 5 月 所 
写 的 博客 文章 “How to size text using ems”( Www.clagnut.comyblog/348 ) 中 列 出 了 原则 和 代码 
范例 ， 并 对 在 网 页 中 识 套 em 单位 时 如 何 处 理 倍 增 效 应 给 出 了 非常 有 帮助 的 解释 。 


接 下 来 , 我 们 会 为 各 个 类 编写 样式 规则 , 但 不 具体 引用 那些 应 用 它们 的 元 素 。 利 用 这 种 一 般 
生 方 法 ， 我 们 的 可 折 和 用 行为 能 在 不 同 的 HTML 元 素 组 合 中 正确 工作 ， 比 如 一 个 hn3 后 面 跟着 一 个 p。 
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collapsible-heading 需 要 15 像 素 的 左 内 边 距 ， 给 箭头 背景 图 像 留 出 空间 : 


.collapsible-heading { 
padding-left: 15px; 
background: url(../images/icon-triangle.png) 0 6px no-repeat; 


箭头 背景 图 像 是 一 个 组 合 图 像 ( sprite ),， 包含 展开 ( 朝 下 ) 和 折 炙 ( 朝 右 ) 两 种 状态 。 如 果 
当前 是 折 又 状态， 背景 位 置 就 变 成 显示 朝 右 箭头 : 


.collapsible-heading-collapsed { 
background-position: 0 -84px; 











我 们 希望 标题 能 够 匹配 目标 设计 , 这 就 意味 着 我 们 不 想 让 h2 继 承 切换 链接 的 默认 下 划 线 ， 
此 会 去 掉 它 : 


.collapsible-heading-toggle { 
text-decoration: none; 


} 

(这 一 步 是 可 选 的 。 如 果 你 确实 希望 可 折 县 容 需 的 标题 保留 原生 的 下 划 线 ， 使 它 看 起 来 像 个 
链接 ， 那 么 只 需 跳 过 这 一 步 。) 

当 无 序列 表 内 容 包含 折 肥 状态 类 时 ， 我 们 将 display 属 性 设置 成 none， 使 它 同 时 在 屏幕 上 和 
对 屏幕 阅读 带 隐 藏 : 


.collapsible-content-collapsed { 
display: none; 














为 了 让 标题 “隐藏 ”或 “显示 ”) 前 面 的 span 处 在 能 够 被 屏幕 阅读 器 阅读 的 位 置 (但 在 屏幕 
上 是 隐藏 的 )， 我 们 把 它 放 到 屏幕 之 外 远 远 的 地 方 : 
.collapsible-heading-status { 


position: absolute; 
left: -99999px; 











最 后 , 我 们 会 给 可 折 委 组 件 内 容 应 用 格式 和 样式 , 让 它 看 上 去 更 接近 目标 设计 。 这 一 部 分 的 
视觉 设计 和 两 个 特定 元 素 (h2、ul ) 有 关 ， 因 此 我 们 会 在 选择 器 里 指定 它们 : 


h2.collapsible-heading { 
font-size: 1.5em; 
font-weight: normal; 


} 


h2.collapsible-heading .collapsible-heading-toggle { 
color: #333; 


ul.collapsible-content { 
border-top: 1px solid #aaa; 
padding-left: 0; 
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margin-left: 16px; 


} 


ul.collapsible-content 1i { 
line-height: 1; 
font-size: 1.3em; 
color: #000; 
border-bottom: 1px solid #aaa; 
padding: .5em 0; 
list-style: inside url(../images/icon-file-warning.png); 


} 


ul.collapsible-content li em { 
color: #666; 
font-style: italic; 
float: right; 
margin-right: 40px; 
font-size: .9em; 


} 
至 此 , 我 们 就 有 了 基础 标记 结构 和 样式 ， 用 来 实现 完全 可 访问 的 组 件 展开 和 折合 状 态 ， 如 
ey 3 











P Details 

W Details 
,purple-flower.tif Not a supported file format 
国 \ flower-photoszip Not a supported file format 











图 8-6 ”组 件 的 折 针 状态 ( 顶部 ) 和 展开 状态 ( 底部 ) 





8.2.3 ”实现 可 折合 的 增强 脚本 


增强 脚本 会 将 基础 标记 转变 成 增强 组 件 , 方法 是 自动 添加 新 的 标记 和 类 , 并 将 点 击 行为 关联 
到 标题 上 来 切换 状态 类 。 

1. 生成 增强 标记 

首先 ， 创 建 对 标题 和 内 容 元 素 的 变量 引用 ， 这 样 就 可 以 用 脚本 操作 它们 : 


// 用 jQuery 找到 h2 
var collapsibleHeading = $('h2'); 











//jQuery 的 next() 方 法 找到 下 一 个 同 级 元 素 
var collapsibleContent = collapsibleHeading.next(); 


我 们 会 给 标题 附 上 collapsible-heading 类 ， 添 加 状态 span 和 显示 /隐藏 文字 ， 并 用 链接 标签 
围 住 标题 文字 : 


collapsibleHeading 
.addClass('collapsible-heading') 
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.prepend('<span class="collapsible-heading-status"></span>') 
.wrapInner('<a href="#" 
wclass="collapsible-heading-toggle" role="button"></a>') 


赋予 内 容 列 表 一 个 collapsibleContent 类 : 


collapsibleContent 
.addClass('collapsible-content'); 


2. 给 增强 标记 应 用 行为 

接 下 来 , 脚本 会 把 事件 指派 给 标题 ， 从 而 展开 和 折 靶 内容 。 这 里 会 使 用 自 定义 事件 ,这样 就 
可 以 在 鼠标 点 击 标题 时 利用 程序 触发 展开 和 折 受 行为 。 

首先 , 我 们 会 创建 一 个 自 定义 折 和 事件 , 它 将 折 释 类 指派 给 标题 , 修改 状态 文字 为 “显示 ”， 
并 将 折 释 类 和 aria-hidden 属 性 添加 到 内 容 里 : 


collapsibleHeading.bind('collapse', function(){ 
// 在 这 个 上 下 文中 ， $(this) 指 的 是 标题 
$(this) 
// 添 加 折 登 类 ， 让 箭头 图 标 朝 右 
.addClass('collapsible-heading-collapsed') 
// 把 可 访问 环境 里 的 span 改 成 “显示 ” 
.find(' .collapsible-heading-status’).text('Show '); 
collapsibleContent 
// 将 折 梧 类 添加 到 内 容 容器 
.addClass( "collapsible-content-collapsed ') 
// 将 aria-hidden 属 性 设置 为 true 
.attr('aria-hidden' ,true); 




















}); 
我 们 还 会 创建 一 个 自 定义 事件 来 展开 内 容 , 大致 过 程 就 是 折 闭 过 程 的 反 转 ( 移 除 和 切换 属性 ， 
修改 文字 以 反映 展开 状态 ): 


collapsibleHeading.bind('expand' , function(){ 
// 在 这 个 上 下 文中 ，$(this) 指 的 是 标题 
$(this) 
// 移 除 折 登 类 ， 让 箭头 图 标 朝 下 
.removeClass('collapsible-heading-collapsed') 
// 把 可 访问 环境 里 的 span 文 字 改 成 “隐藏 ” 
find(' .collapsible-heading-status').text('Hide '); 














collapsibleContent 
// 移 除 内 容 容 器 中 的 折 司 类 
.removeClass('collapsible-content-collapsed') 
// 将 aria-hidden 属 性 设置 为 false 
.attr('aria-hidden' ,false); 


})3 
3. 触发 自 定义 展开 / 折 双 事件 
我 们 已 经 创建 了 自 定义 事件 , 因此 只 需 在 恰当 的 时 候 触发 它们 就 行 了 。 增强 脚本 会 在 网 页 载 
入 时 立即 触发 折 著 行为 ， 让 内 容 在 默认 情况 下 自动 折 鞋 : 


collapsibleHeading.trigger('collapse'); 
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我 们 还 会 编写 逻辑 代码 , 在 用 户 点 击 标题 时 触发 恰当 的 事件 ( 如 果 内 容 是 折 双 的 就 展开 ,如 
果 内 容 是 展开 的 就 折 县 )。 可 以 使 用 一 条 简单 的 if/else 语 句 做 到 这 一 点 。 点 击发 生 时 ， 我 们 会 检 
查 标题 上 是 否 存 在 折 秋 类 ， 然 后 触发 恰当 的 事件 。 我 们 会 对 点 击 事件 返回 false 作 为 结束 ， 以 确 
保 原生 链接 行为 不 会 跟着 出 现 ( 如 果 出 现 了 ， 那 么 一 个 # 字 符 就 会 附加 到 URL 尾 部 ， 而 大 多 数 浏 
览 锅 会 滚动 到 页 面 项 部 ): 
collapsibleHeading.click(function(){ 
// 如 果 标 题 有 折 司 类 就 展开 它 
if( $(this).is('.collapsible-heading-collapsed') ){ 
$(this).trigger('expand' ); 























J 

// 否 则 就 折 痘 它 

else { 
$(this).trigger('collapse'); 


} 
// 返 回 false， 以 避免 默认 的 锚 点 击 
return false; 


]); 
现在 ,我们 就 有 了 一 个 功能 完整 的 可 折 和 县 内 容 组 件 , 对 键盘 和 屏幕 阅读 器 都 是 完全 可 访问 的 。 


8.3 使 用 可 折 释 脚本 


随 书 附带 的 演示 和 可 下 载 代 码 (位 于 www.filamentgroup.com/dwpe ) 包含 一 个 名 为 
jQuery.collapsible.js 的 脚本 。 它 在 一 个 简单 可 复 用 的 函数 里 实现 了 这 一 章 所 有 的 原则 ， 你 可 以 将 
这 个 函数 应 用 到 任何 网 页 元 素 上 。 

要 使 用 这 个 脚本 , 请 下 载 并 引用 可 折 受 演示 页 里 列 出 的 那些 文件 。 要 让 网 页 里 的 某 个 标题 表 
现 得 像 一 个 可 折 和 县 组 件 ， 只 需 指 定 jQuery 选 择 器 ， 对 其 简单 地 调用 collapsible 方 法 : 

$('h2').collapsible(); 

在 这 里 例子 里 , 可 折 笃 脚本 会 将 可 折 释 行为 应 用 到 网 页 里 的 每 个 h2 上 。 不 需要 指定 此 插件 应 
该 展开 和 折 共 哪个 内 容 块 ， 因 为 它 假 定 下 一 个 元 素 就 是 内 容 ， 这 个 元 素 紧 跟 在 对 其 调用 
collapsible 方 法 的 标记 之 后 ( 在 我 们 的 范例 里 是 无 序列 表 )。 

给 每 个 h2 都 应 用 这 一 行为 , 对 真实 世界 里 的 应 用 程序 而 言 可 能 有 些 范围 过 大 , 所 以 可 以 使 用 
jQuery 的 选择 需 找 到 更 小 范围 内 的 可 折 肝 元素, 可 以 是 ID 或 类 属性 ， 也 可 以 是 像 下 面 这 样 的 派生 
选择 需 〈descendent selector )， 它 会 将 可 折 蔷 行为 应 用 到 某 个 特定 div 里 的 所 有 h2 元 素 上 : 

$('#main h2').collapsible(); 

我 们 在 许多 增强 体验 里 经 常 使 用 这 一 章 描 述 的 技巧 来 显示 和 隐藏 内 容 ( 包括 在 视觉 上 和 对 屏 
幕 阅读 器 )， 它 们 能 让 我 们 响应 式 地 将 内 容 和 功能 面向 合适 的 受众 。 

这 些 基 本 的 概念 和 原则 (设计 类 , 应 用 键盘 访问 ,添加 有 用 的 操作 说 明 语句 ， 以 及 隐藏 和 显 
示 ) 可 应 用 到 网 页 的 任何 内 容 上 。 它 们 可 以 用 于 构建 更 为 复杂 的 组 件 ， 或 者 创建 出 能 根据 用 户 的 
选择 ， 以 可 访问 的 交互 方式 隐藏 和 显示 表单 元 素 的 表单 。 






























































第 9 章 
标 签 页 








标签 页 (Tabs ) 将 内 容 整 齐 地 组 织 成 一 组 逻辑 版 块 , 通过 每 次 只 显示 一 个 版 块 节 省 了 界面 空 





间 。 标签 页 一 下 子 就 能 


出 来 并 且 符合 直觉 ， 因 为 它 模 拟 了 真实 世界 范例 的 外 观 和 行为 ， 比 如 标 








签 式 的 马尼拉 文件 夹 (manila file folder )， 或 者 某 本 通讯 录 里 的 标签 分 类 区 域 。 





在 网 站 或 应 用 程序 界面 里 使 用 标签 页 的 方式 有 很 多 ， 包 括 下 面 这 些 

> 展示 一 个 紧凑 的 内 容 模块 ， 例 如 某 个 新 闻 网 站 上 “最 多 邮件 发 送 /最 流行 /最 多 讨论 ”的 一 
组 文章 ， 或 是 像 幻 灯 片 那样 循环 播放 的 一 组 功能 。 

> 作为 局 部 导航 或 主要 视图 切换 工具 ， 每 个 标签 都 会 置换 掉 网 页 的 一 大 块 区 域 ， 比 如 某 个 
出 版 应 用 程序 里 的 编辑 和 预览 模式 。 

> 将 与 某 个 单 选 按 钮 元 素 相 关联 的 一 组 表单 元 素 在 视觉 上 进 
2 章 里 的 那个 结账 支付 范例 。 

标签 组 的 首要 功能 是 选择 隐藏 和 显示 某 些 可 见 内 容 。 要 点 是 要 确保 每 个 内 容 块 的 隐藏 方式 仍 








行 归 组 , 比如 关于 X 光 透视 的 第 




















然 能 被 屏幕 阅读 器 访问 。 为 了 进一步 提升 可 访问 性 ， 关 键 在 于 使 用 ARIA 属 性 并 添加 脚本 ， 确 保 


屏幕 阅读 器 用 户 既 能 进行 导航 ， 又 能 用 键盘 选择 标签 页 。 
这 一 章 会 向 你 展示 如 何 制 作 一 组 标签 页 , 让 基本 体验 里 的 内 容 既 有 组 织 又 可 用 , 以 及 如 何 将 





基础 标记 转换 成 可 访问 的 标签 页 ， 


让 所 有 人 都 满意 并 且 可 以 使 用 。 





9.1 X 光 透视 


假设 我 们 正在 构建 一 个 新 闻 网 站 , 它 的 首页 内 能 一 








签 式 的 版 块 : 突 发 新 闻 、 热 门 体育 新 闻 以 及 未 来 5 天 的 天 气 预 报 ， 如 图 9-1 所 示 。 
News Sports Weather " News Sports Weather | News Sports Weather 
Breaking News Top Sports Stories 5 Day Forecast 
Senate Approves Budget By Close Margin Red Sox Close to Another Record Year WEDNESDAY Heavy Rain - 36°F | 19°F 
Dolphin Said to Speak Esperanto ls Extreme Unicycling The Next Craze? THURSDAY Mostly Coudy - 42°F|26°F 














Spectacular Solar Eclipse This Afternoon 


Patriots Looking to Make Key Trade 


FRIDAY Sunny - 47°F|36°F 





Stunt Man Jumps Grand Canyon in Segway 


Cup Stacking Champ To Star in Movie 


SATURDAY Windy & Gray - 44°F | 30°F 





Mid Term Election Down to the Wire 


Boston Celtics Win 11th Game in a Row 


SUNDAY Heavy Snow - 38°F | 28°F 








图 9-1 


增强 体验 的 目标 新 闻 设计 





有 两 种 方式 可 以 编写 具备 语义 意义 的 标签 页 组 件 基础 标记 。 





个 用 于 显示 精 选 内容 的 小 块 , 显示 一 些 标 
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> 将 三 个 标签 页 版 块 写成 连续 的 块 ， 每 个 块 都 有 一 个 标题 ， 后 面 紧 跟 着 它 的 内 容 ， 并 将 标 
题 打造 成 标签 页 的 样式 。 

> 创建 一 张 由 销 链 接 构 成 的 无 序列 表 ， 对 应 相关 的 内 容 块 。 用 户 点 击 某 个 链接 时 ， 网 页 会 

滚动 到 具体 的 内 容 块 上 。 

这 两 种 标记 选择 在 基本 体验 里 都 是 成 立 和 可 用 的 。 就 我 们 这 个 新 闻 范 例 而 言 , 各 个 内 容 块 都 
包含 了 描述 性 的 头 信 息 ， 可 以 将 它们 作为 增强 体验 里 的 标签 页 标题 。 这 种 方法 的 效果 非常 好 ， 而 
日 实施 起 来 也 非常 简单 。 

但 对 于 紧凑 的 精 选 块 里 为 标签 预 留 的 可 用 空间 来 说 , 这 些 头 信息 里 的 文字 有 些 长 。 而 且 在 移 
动 设 备 上 ,这 些 堆 释 起 来 的 内 容 块 可 能 会 变 得 很 长 ， 被 推 向 网 页 下 方 , 这 就 意味 着 用 户 无 法 立即 
看 到 和 使 用 第 二 个 块 和 第 三 个 块 。 

用 一 列 销 链 接 实现 标签 页 , 我 们 可 以 使 用 短 名 称 来 指 代 这 三 个 标签 页 版 块 。 另 外 , 它们 还 是 
一 种 基 凑 的 跳跃 导航 方式 ,在 网 页 的 最 顶部 显示 所 有 选项 。 使 用 锚 链 接 还 有 一 个 好 处 : 用 户 在 基 
本 体验 里 可 以 收藏 某 个 特定 的 内 容 块 ， 因 为 锚 的 href 值 ( 即 # 号 串 ) 会 被 自动 添加 到 浏览 器 地 址 
栏 (比如 index.htm#sports ), 这 个 功能 用 静态 标题 元 素 无 法 实现 。 最后, 销 链 接 和 它 关 联 的 内 容 
不 必 非 得 在 标记 里 按 顺 序 排列 ， 可 以 用 HTML 语 义 手 段 将 它们 联系 到 一 起 ,方法 是 让 每 个 链接 的 
href 值 (href="#sports" ) 与 在 特定 内 容 块 上 设置 的 ID (div id="sports" ) 相 匹 配 。 

出 于 这 些 原因 〈 紧凑 性 、 易 于 跳跃 导航 、 添 加 书签 以 及 可 以 随意 组 织 网 页 结构 的 灵活 性 )， 
我 们 将 使 用 销 链 接 构 建 标签 页 。 

构建 完 这 种 标记 结构 后 , 基本 体验 在 缺少 CSS 和 JavaScript 的 情况 下 结构 清晰 而 且 可 用 。 这 个 
基础 标记 结构 还 天 生 可 以 用 键盘 访问 , 并 且 在 任何 屏幕 阅读 器 上 应 该 都 能 工作 , 因为 它 使 用 了 语 
义 化 HTML， 如 图 9-2 所 示 。 

































































® Sports 
® Weather 





Breaking News 





5 Day Forecast 


Wednesday 

Heavy Rain - 36°F | 19°F 
Thursday 

Mostly Coudy - 42°F | 26°F 
Friday 
Sunny - 47°F | 36°F 
Saturday 

Windy & Gray - 44°F | 30°F 
Sunday 

Heavy Snow - 38°F | 28°F 











图 9-2 基本 体验 里 的 标签 页 内 容 


或 
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我 们 会 为 那些 有 能 力 泻 染 出 增强 体验 的 浏览 器 三 加 上 额外 的 样式 和 行为 ,将 这 些 结构 化 内 容 
转变 成 一 个 标签 页 组 件 ， 并 添加 ARIA 属 性 和 键盘 行为 ， 确 保 屏 幕 阅读 需 的 可 访问 性 。 

ARIA 规 范 为 屏幕 阅读 器 提供 了 一 组 详细 的 属性 ， 用 于 恰当 地 描述 某 个 标签 页 组 件 里 各 个 子 

组 件 的 角色 和 状态 ， 我 们 的 增强 脚本 会 将 它们 应 用 到 增强 标记 上 。ARIA 还 为 在 标签 页 组 件 里 用 
键盘 导航 推荐 了 特定 的 交互 行为 。 具 体 来 说 ， 它 建议 标签 条 里 的 各 个 链接 (“新 闻 ”News、“ 体 
育 ”Sports、“ 天 气 ”Weather ) 要 统一 表现 为 单个 UI 控件 。 当 某 个 标签 条 获得 焦点 时 ， 用 方向 键 
应 该 能 前 后 切换 标签 页 。 当 用 户 的 焦点 在 某 个 标签 上 时 ， 按 下 Tab 键 应 该 会 使 焦点 离开 标签 条 ， 
跳 到 网 页 里 下 一 个 可 获得 焦点 的 元 素 上 : 如 果 当 前 打开 的 标签 页 里 有 可 获得 焦点 的 链接 或 者 表单 
元 素 ， 就 会 跳 到 这 块 内 容 上 ; 如 果 没 有 ， 则 会 跳 到 标签 页 组 件 之 外 的 某 个 元 素 上 。 这 一 行为 需要 
用 脚本 实现 ， 因 为 Tab 键 在 正常 情况 下 会 将 焦点 移 过 标签 条 里 的 每 个 链接 ， 而 方向 键 的 原生 作用 
是 滚动 浏览 器 的 窗口 。 
我 们 还 得 决定 在 增强 体验 里 如 何 处 理 URL# 叶 串 。 之 前 提 到 ， 在 基本 体验 里 ， 对 书签 和 后 退 
按钮 的 支持 原生 内 建 于 内 部 销 链 接 ( 意 指 这 些 链接 引用 的 是 同一 张 网 页 里 的 内 容 )。 当 用 户 点 击 
某 个 销 链接 时 ， 网 页 的 URL ( index.htm ) 会 自动 更 新 ， 加 上 锚 链 接 的 “# 号 串 ” 目 标 
( index.htm#sports )， 之 后 它 就 可 以 被 收藏 了 。 点 击 后 退 按钮 后 ， 网 页 会 返回 之 前 的 # 号 串 以 及 相 
应 的 滚动 位 置 上 。 

如 果 标 签 页 组 件 控制 了 网 页 里 非常 大 的 一 块 区 域 ,用 户 也 许 会 将 标签 视 为 网 页 级 别 的 导航 元 
素 ， 可 能 会 期 望 能 收藏 特定 的 标签 页 视图 或 使 用 后 退 按钮 来 切换 它们 。 为 此 ， 必 须 添 加 额外 的 
JavaScript 逻 辑 ， 在 用 户 点 击 标签 链接 时 用 程序 更 新 URL# 叶 串 ， 还 要 查看 URL 里 是 否 存在 (或 改 
变 了 ) # 号 串 ， 依 此 显示 出 适当 的 标签 页 内 容 来 匹配 当前 的 # 号 串 值 。 

然而 ， 在 这 个 特定 的 目标 设计 案例 里 ， 是 非常 小 的 标签 页 组 件 内 山 于 一 张 更 大 的 网 页 之 中 。 
如 果 在 它 内 部 进行 的 交互 能 够 影响 浏览 器 历史 和 后 退 按钮 的 行为 ， 就 可 能 令 人 感觉 困惑 和 不 便 。 
举 个 例子 ,如果 用 户 先 访问 体育 标签 页 ， 再 去 天 气 标签 版 块 ,他们 就 需要 点 击 后 退 按钮 三 次 才能 
回 到 上 一 张 网 页 ( index.htm #weather 一 index.htm#sports 一 index.htm 一 上 一 个 页 面 )。 因 此 ， 我 们 
不 想 在 用 户 每 次 点 击 标签 时 都 更 新 URIL# 号 串 。 对 这 样 的 小 型 标签 页 组 件 ， 可 以 用 JavaScript 来 禁 
止 锚 链 接 默 认 的 更 新 URL# 号 串 行 为 。 

我 们 首先 介绍 如 何 创 建 一 个 简单 的 新 闻 标 签 页 组 件 ( 从 构建 它 的 基础 标记 到 添加 增强 信息 )， 
然后 再 概述 如 何 扩展 某 个 标签 页 组 件 ， 使 它 支 持 书签 和 历史 追踪 ( 后 退 按钮 ) 功能 。 


9.2 创建 标签 页 


为 了 构建 新 闻 标签 页 组 件 , 首先 我 们 会 从 一 列 锚 链 接 开始 编写 结构 良好 的 基础 标记 , 将 内 容 
组 织 得 尽 可 能 清晰 ， 然 后 给 有 能 力 的 浏览 器 应 用 样式 和 脚本 增强 信息 。 


9.2.1 基础 标记 和 样式 
我 们 会 将 标签 页 标记 为 无 序列 表 里 的 一 组 锚 链 接 , 这 些 链接 通过 引用 ID 指向 一 个 具体 的 内 容 
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块 ,在 基本 体验 里 , 点 击 一 个 链接 会 将 网 页 滚动 到 它 关联 的 内 容 块 上 , 并 用 合适 的 # 号 串 更 新 URL 
( 例如 index.htm#news ): 


<U1> 
<li><a href="#news">News</a></1i> 
<1i><a href="#sports">Sports</a></1i> 
<li><a href="#weather">Weather</a></1i> 
</ul> 


在 列表 下 方 , 各 个 标签 页 内 容 块 都 被 编写 成 一 个 div, 它 带 有 一 个 唯一 的 ID , 关联 上 方 的 锚 链 接 


<div id="news">...</div> 
<div id="sports">...</div> 
<div id="weather">...</div> 


在 前 两 个 标签 页 ( 新闻 和 体育 ) 里 , 我 们 会 使 用 一 个 h2 作 为 标题 , 后 面 跟着 一 张 内 含 文章 链 
接 的 无 序列 表 。 在 基本 体验 里 ， 这 些 链接 会 显示 成 易于 阅读 的 带 符号 ( bulleted ) 列表 格式 : 


<div id="news"> 
<h2>Breaking News</h2> 
<ul> 
<]i><a href="senate.htm">Senate Approves Budget By Close 
Margin</a></1i> 


</div> 
天 气 内 容 块 同样 也 会 使 用 一 个 h2 作 为 标题 ,然后 使 用 一 张 定义 列表 ( 即 d1 ) 来 展现 一 周 内 的 
各 天 以 及 相应 的 天 气 预报 。 在 基本 体验 里 ， 大 多 数 浏览 器 默认 会 给 日 期 (dt ) 和 天 气 预 报 (dd ) 
演 染 出 清晰 的 区 别 : 
<div id="weather"> 
<h2>5 Day Forecast</h2> 
<d]> 


<dt>Wednesday</dt> 
<dd>Heavy Rain - 368&#176;F | 198&#176;F</dd> 














</dl> 
</div> 


一 个 ID 为 featured 的 容器 div 会 围 住 整个 标签 页 结构 ( 链接 列表 和 内 容 块 )， 以 描述 内 容 的 用 
途 。 它 内 部 的 无 序列 表 会 被 指派 一 个 featured-links 的 ID ， 所 有 的 内 容 块 (新 闻 、 体 育 和 天 气 ) 
会 被 归 组 进 一 个 人 D 为 featured-content 的 容器 div 里 ,虽然 我 们 主要 会 在 增强 体验 里 使 用 这 些 容器 
来 给 标签 页 组 件 添加 样式 ,但 它们 也 能 帮助 我 们 在 基本 体验 里 归 组 和 组 织 内 容 : 


<div id="featured"> 
<ul id="featured-links"> 
<li><a href="#news">News</a></1i> 
<]i><a href="#sports">Sports</a></1i> 
<1i><a hrer="#weather">Weather</a></1i> 
</ul> 
<div id="featured-content"> 
<div id="news">...</div> 
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<div id="sports">...</div> 
<div id="weather">...<div> 
</div> 
</div> 


不 需要 多 少 CSS 来 装饰 这 个 基本 体验 ， 因 为 我 们 用 的 是 非常 有 描述 性 的 标记 ( 例如 标题 、 列 
表 和 锚 链 接 )， 它 们 会 赋予 内 容 一 种 清晰 、 可 用 的 格式 。 为 了 保持 简洁 ， 我 们 只 在 基本 样式 表 里 
加 入 一 条 规则 ,设置 基本 字体 偏好 ， 其 他 的 样式 则 交 给 浏览 絮 用 默认 值 处 理 : 

body { font-family: "Segoe UI", Arial, sans-serif; } 


现在 ， 我 们 就 有 了 创建 基本 体验 所 需 的 、 应 用 了 安全 样式 的 基础 标记 ( 如 图 9-2 所 示 )。 














9.2.2 ”增强 标记 和 样式 


标签 页 增强 脚本 运行 时 ， 它 会 给 标记 加 上 许多 的 类 和 了 来 应 用 标签 页 组 件 样式 和 脚本 行为 。 

我 们 会 将 tabs-nav 类 分 配给 由 销 链 接 组 成 的 无 序列 表 , 并 给 每 个 列表 项 指派 一 个 由 脚本 生成 
的 了 D， 它 由 锚 ID 和 tab- 前 绥 组 合 而 成 。 我 们 还 会 将 tab-selected 类 分 配给 当前 选中 的 标签 ， 稍 后 
应 用 样式 规则 ， 使 它 高 亮 显示 并 在 视觉 上 与 该 标签 的 内 容 容器 相连 。 

我 们 会 将 tabs-body 类 添加 到 外 侧 的 标签 页 内 容 容 器 上 ,并 给 它 里 面 的 每 一 个 标签 页 内 容 div 
指派 一 个 tab-panel 类 。 当 前 选中 的 标签 面板 也 会 分 配 到 一 个 tabs-panel-selected 类 ， 用 来 切换 
标签 页 内 容 的 可 见 性 : 

<div id="featured"> 

<ul id="featured-links" class="tabs-nav"> 
<li class="tab-selected" id="tab-news"><a href="#news">News</a></1i> 
<li id="tab-sports"><a href="#sports">Sports</a></1i> 
<1i id="tab-weather"><a href="#weather">Weather</a></1i> 

</U1> 


<div id="featured-content" class="tabs-body"> 
<div id="news" class="tabs-panel tabs-panel-selected"> 



































</div> 
<div id="sports" class="tabs-panel"> 
</div> 
<div id="weather" class="tabs-panel"> 
</div> 
</div> 
</div> 


至 于 增强 体验 的 可 访问 性 支持 ， 我 们 会 添加 若干 ARIA 和 tabindex 属 性 。 首 先 ， 给 body 元 素 
应 用 application 这 个 ARIA role， 指 示 屏 幕 阅读 器 将 其 视 为 一 个 应 用 程序 式样 的 组 件 ， 而 不 是 标 
准 网 页 内 容 : 

<body role="application"> 


我 们 会 将 tablist 这 个 role 指 派 给 销 链 接 ， 每 个 列表 项 的 role 则 是 tab。 它 们 的 作用 是 通知 屏 
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幕 阅 读 器 用 户 这 些 链接 组 成 了 可 点 击 的 标签 条 。 各 个 内 容 div 都 会 获得 一 个 ARIA role= 
"tabpanel" ,标明 它 是 某 个 标签 的 内 容 块 ， 也 会 获得 aria-labelledby 属 性 ,将 它 及 其 对 应 标签 的 
id 关 联 起 来 。 另 一 个 属性 aria-hidden (设置 为 false ) 标明 它 是 当前 可 见 的 标签 面板 ， 我 们 会 在 
其 他 的 面板 上 设置 true 值 。 另 外 ， 我 们 会 给 每 个 标签 应 用 一 个 tabindex 属 性 ， 活 动 标签 的 值 是 0， 
其 他 的 则 是 -1: 


<div id="featured"> 

<ul id="featured-links" role="tablist" class="tabs-nav"> 
<1i role="tab" class="tabs-selected" id="tab-news"> 
<a href="#news" tabindex="0">News</a></1i> 
<li role="tab" id="tab-sports"><a href="#sports" 
tabindex="-1">Sports</a></1i> 
<1i role="tab" id="tab-weather"><a href="#weather" 
tabindex="-1">Weather</a></1i> 

</ul> 

<div id="featured-content" class="tabs-body"> 
<div id="news" role="tabpanel" aria-labelledby="tab-news" 
aria-hidden="false" class="tabs-panel tabs-panel-selected"> 





















































</div> 
<div id="sports" role="tabpanel" aria-labelledby="tab-sports" 
aria-hidden="true" class="tabs-panel"> 





</div> 
<div id="weather" role="tabpanel”" aria-labelledby="tab-weather" 
aria-hidden="true" class="tabs-panel"> 


</div> 
</div> 
</div> 


通过 这 种 方式 把 tabindex 属 性 应 用 到 销 链 接 上 ， 就 能 覆盖 它们 的 原生 行为 , 把 它们 从 独立 可 
获得 焦点 的 元 素 转变 成 只 有 一 个 元 素 能 获得 焦点 的 单个 组 件 。 随 着 焦点 在 标签 之 间 转 移 , 我 们 会 
用 JavaScript 把 tabindex="0" 这 个 值 (可 获得 焦点 ) 只 放 到 当前 选中 的 标签 上 ， 其 他 则 统一 设置 成 
tabindex="-1"。 动 态 改变 这 个 值 能 确保 每 次 这 个 组 件 在 网 页 上 获得 Tab 焦 点 时 ， 焦 点 会 回 到 活动 
标签 上 。 这 一 技巧 被 称 为 游 动 标签 序号 ( roving tab index )。 
完成 标记 后 , 就 可 以 接着 给 标签 页 添加 样式 来 匹配 我 们 的 目标 设计 。 在 增强 样式 表 里 , 首先 
会 给 用 于 标签 条 的 无 序列 表 添 加 样式 : 将 它 下 移 1 像素 重 闭 到 面板 上 ， 移 除 列表 项 前 面 的 符号 ， 
浮动 各 个 列表 项 让 它们 并 排 显示 ， 并 给 链接 添上 背景 图 像 和 边框 样式 ， 效 果 如 图 9-3 所 示 。 
.tabs-nav { 
height:2em; 
margin:0; 
padding:0; 
padding-left:1px; 
bottom: -1px; 


list-style:none; 
position:relative; 
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.tabs-nav 1i { 
float:1left; 
margin:0; 
padding:0; 


.tabs-nav li a { 
float:1left; 
padding:.3em 1.4em .4em; 
text-decoration:none; 
font-size:1.4em; 
border:1px solid #aaa; 
border-bottom:0; 
background:#ddd url(../images/bg-tab.png) 50% 50% repeat-x; 
margin-right:-1px; 
color:#222; 


News Sports Weather 











图 9-3 ”应 用 了 标签 条 样式 的 链接 列表 
接 下 来 ， 编 写 一 些 CSS 规 则 ， 改 变 鼠 标 悬 停 时 的 标签 外 观 : 


.tabs-nav 1i a:hover { 
background:#eee url(../images/bg-tab-hover.png) 50% 50% repeat-x; 
color:#000; 


} 


然后 , 给 选中 状态 应 用 样式 。 选 中 的 标签 会 在 底部 显示 白色 边框 , 在 视觉 上 和 标签 面板 及 圆 
化 的 顶 角 连 起 来 。 我 们 还 会 添加 CSS3 的 border-radius 属 性 来 圆 化 选中 标签 的 两 个 项 角 ( 别 担心 ， 
不 文 持 这 个 属性 的 浏览 器 只 会 显示 方形 的 边 角 )。 默 认 情 况 下 ，border-radius 会 请 应 用 到 对 象 的 全 
部 四 个 边 角 上 。 要 圆 化 某 个 特定 的 边 角 , 每 一 个 目标 边 角 都 需要 设置 三 个 属性 以 适应 各 种 浏览 
的 实现 方式 : 举 个 例子 ， 如 果 只 想 圆 化 右上 角 ， 那么 需要 设置 标准 的 border-top-right-radius 
属性 ， 以 及 两 个 -moz 和 -webkit 版 的 浏览 需 专 用 属性 ， 效 果 如 图 9-4 所 示 。 


.tabs-nav li.tabs-selected a { 
position:relative; 
background:#fff; 
padding-top: .5em; 
margin-top:-.2em; 
border-bottom:1px solid #fff; 
-moz-border-radius-topright:5px; 
-webkit-border-top-right-radius:5px; 
border-top-right-radius:5px; 
-moz-border-radius-topleft:5px; 
-webkit-border-top-left-radius:5px; 
border-top-left-radius:5px; 

} 

.tabs-nav li.tabs-selected { 
margin-left:-1px; 


} 
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图 9-4 ”标签 交互 状态 (从 左 到 右 ) : 已 选中 、 鼠 标 悬 停 和 默认 状态 


我 们 给 包含 标签 内 容 面板 的 容器 ( tabs-body ) 设置 一 个 固定 的 宽度 ， 并 给 它 一 个 边框 和 背 
景 图 像 来 增加 一 点 界定 感 和 质感 。 除 左上 角 之 外 (我们 让 它 保持 方形 ， 与 上 面 的 标签 相连 )， 它 
的 所 有 边 角 都 被 圆 化 了 。 每 个 标签 内 容 div ( tabs-panel ) 都 设置 成 了 display:none， 在 默认 情况 
下 是 隐藏 的 。 某 个 标签 被 选中 时 , 脚本 会 将 tabs-panel-selected 类 添加 到 关联 的 标签 内 容 面板 上 ， 
从 而 将 它 设置 成 display: block， 使 其 可 见 ， 效 果 如 图 9-5 所 示 。 


.tabs-body { 
clear:both; 
overflow:auto; 
border:1px solid #aaa; 
width:300px; 
background:#ddd url(../images/bg-tab-body.png) 50% bottom repeat-x; 
-moz-border-radius-topright:5px; 
-webkit-border-top-right-radius:5px; 
border-top-right-radius:5px; 
-moz-border-radius-bottomright:5px; 
-webkit-border-bottom-right-radius:5px; 
border-bottom-right-radius:5px; 
-Moz-border-radius-bottomleft:5px; 
-webkit-border-bottom-left-radius:5px; 
border-bottom-left-radius:5px; 














.tabs-body div.tabs-panel { 
padding:15px; 
overflow:auto; 
display:none; 
font-size:1.4em; 

} 

.tabs-body div.tabs-panel-selected { 
display:block; 

} 


News Sports Weather 


Breaking News 


Senate Approves Budget By Close Margin 
Dolphin Said to Speak Esperanto 








Spectacular Solar Eclipse This Afternoon 
Stunt Man Jumps Grand Canyon in Segway 
Mid Term Election Down to the Wire 








图 9-5 ”完成 后 的 增强 体验 标签 样式 
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9.2.3 ”标签 页 脚本 














完成 标记 草案 和 样式 后 , 现在 可 以 编写 将 基础 标记 转变 成 标签 页 组 件 的 增强 脚本 , 用 在 通过 





能 力 测试 的 那些 浏览 器 上 。 














首先 ， 定义 一 些 变 量 来 引用 标签 页 组 件 里 那些 重要 的 元 素 ， 包 括 外 部 容 右 、 销 链接 列表 和 标 























// 引 用 标签 页 容器 
var tabs = $('div#featured); 


// 设 置 应 用 程序 模式 
$('body').attr('role','application'); 
//nav 是 第 一 个 ul 

var tabsNav = tabs.find('ul:first'); 


//body 是 nav 的 下 一 个 同 级 元 素 
var tabsBody = tabsNav.next(); 


// 用 于 创建 标签 ID 的 前 级 ， 创 建 依 据 的 是 对 应 div 的 ID 
var tabIDprefix = “tab- ; 


接 下 来 ,将 所 有 类 、ID、ARIA 和 tabindex 属 性 添加 到 基础 标记 ， 


// 为 nav 添 加 类 和 aria 

tabsNav 
.addClass('tabs-nav') 
.attr('role','tablist'); 








// 为 标签 页 body 添 加 类 
tabsBody.addClass('tabs-body' ); 


// 找 到 标签 面板 ,添加 类 和 aria 
tabsBody.find('>div').each(function(){ 
$(this) 
.addClass('tabs-panel') 
.attr('role','tabpanel') 
.attr('aria-hidden' , true) 
.attr('aria-labelledby', tabIDprefix + $(this).attr('id')); 
}); 


// 设 置 每 个 标签 的 角色 
tabsNav.find('1i').each(function(){ 
$(this) 
.attr('role','tab') 
.attr('id', 
tabIDprefix +$(this).find('a').attr('href').split('#')[1] ); 
}); 


// 将 所 有 标签 的 tabindex 设 为 -1 
tabsNav.find('a').attr('tabindex','-1'); 


签 内 容 的 容器 。 那些 用 来 生成 唯一 ID 的 ID 前 级 ( tabs- ) 和 ARIA 应 用 程序 模式 都 会 在 这 里 预先 定义 : 


以 匹配 增强 标记 : 
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用 户 选择 一 个 标签 时 , 我 们 会 添加 和 移 除 一 些 类 , 用 选中 状态 来 高 之 显示 正确 的 标签 , 调整 
各 个 标签 的 tabindex 值 ， 把 焦点 设 定 到 选中 的 标签 上 ， 并 显示 出 关联 的 标签 内 容 块 。 我 们 需要 一 
种 可 以 重复 使 用 的 通用 程序 方式 来 选择 标签 ,因为 它们 会 以 多 种 方式 被 选中 ( 鼠标 点 击 、 键 盘 事 
件 ， 以 及 网 页 首次 载 人 时 ): 


// 选 择 某 个 标签 的 通用 函数 
function selectTab(tab){ 
// 取 消 选 中 活动 标签 
tabsNav 
.find('li.tabs-selected') 
.removeClass('tabs-selected') 
.find('a') 
.attr('tabindex','-1'); 
// 选 择 新 的 选项 卡 
tab 
.attr('tabindex','0') 
.parent() 
.addClass('tabs-selected'); 
// 取 消 选中 活动 面板 
tabsBody 
.find('div.tabs-panel-selected') 
.attr('aria-hidden' ,true) 
.removeClass('tabs-panel-selected'); 














| 























// 选 中 新 面板 
$( tab.attr('href') ) 
.addClass('tabs-panel-selected') 
.attr('aria-hidden' ,false); 
// 如 果 没有 其 他 命令 ， 就 更 新 URL# 号 事 并 让 标签 获得 焦点 
window.1location.hash = tab.attr('href').replace('#',''); 


// 将 焦点 转移 到 新 选中 的 标签 上 
tab[0].focus(); 


有 了 这 段 脚 本 , 我 们 就 可 以 用 想 要 选中 的 标签 销 元 素 作 为 参数 来 调用 selectTab 函 数 。 现 在 ， 
我 们 已 经 准备 好 应 用 鼠标 、 键 盘 和 其 他 事件 来 将 它们 绑 定 到 一 起 了 。 

首先 , 我 们 会 给 标签 链接 应 用 事件 。 用 户 用 鼠标 点 击 某 个 标签 时 , 我 们 会 将 那个 标签 传递 给 
通用 的 selectTab 函 数 。 绑 定 这 个 事件 时 ， 我 们 会 return false 以 避免 出 现 原生 的 销 链接 行为 (就 

















是 指 更 新 URL# 号 串 ， 并 让 焦点 跳 离 标签 链接 ， 转 移 到 内 容 块 上 ) : 
tabsNav.find('a') 
.click(function(){ 


selectTab( $(this) ); 
return false; 


用 
下 一 个 需要 考虑 的 交互 点 是 键盘 。 我 们 会 追踪 标签 拥有 焦点 时 和 触发 的 任何 keydown 事 件 ， 并 
映射 特定 的 键 用 于 将 焦点 转移 到 另 一 个 标签 上 : 左 方向 键 和 上 方向 键 会 选中 上 一 个 标签 ， 而 右 方 
向 键 和 下 方向 键 会 选中 下 一 个 标签 。 开 始 键 ( Home ) 和 结束 键 ( End ) 则 分 别 选择 最 前 和 最 后 的 














132 第 9 章 标签 页 























标签 ,我 们 会 以 绑 定 逻辑 代码 到 特定 键 码 (key code， 比 如 36 就 是 开始 键 ) 的 方式 关联 键盘 事件 : 


tabsNav.find('a') 
.keydown(function(event){ 
var currentTab = $(this).parent(); 
switch(event.keyCode){ 

Case 37: // 左 方向 键 

case 38: // 上 方向 键 
if(currentTab.prev().size() > 0){ 
selectTab( currentTab.prev().find('a')); 
} 
break; 

Case 39: // 右 方向 键 

case 40: // 下 方向 键 
if(currentTab.next().size() > 0){ 
selectTab( currentTab.next().find('a') ); 
} 
break; 

case 36: // 开始 键 
SelectTab( tabsNav.find('1i:first a') ); 
break; 

case 35: // 结束 键 
selectTab( tabsNav.find('li:last a') ); 
break; 

} 

}); 


最 后 , 我 们 会 在 网 页 载 入 时 打开 第 一 个 标签 面板 。 通 过 把 第 一 个 标签 的 引用 传递 给 selectTab 
函数 做 到 这 一 点 : 
selectTab( tabsNav.find('a:first') ); 


9.3 ”让 标签 页 更 进一步 


这 一 章 描述 了 创建 一 个 简单 标签 页 组 件 涉及 的 步骤 。 但 是 , 根据 你 的 实现 需要 , 还 有 其 他 一 
些 方法 可 以 用 来 修改 或 扩展 标签 页 。 这 些 方法 包括 书签 和 历史 追踪 支持 , 创建 自动 轮换 效果 ， 引 
用 外 部 标签 内 容 ， 以 及 将 标签 页 作为 一 个 手风琴 组 件 ( accordion widget ) 显示 。 





9.3.1 书签 和 历史 《后 退 按钮 ) 追踪 


当 你 在 增强 体验 里 用 标签 条 来 控制 大 块 的 屏幕 区 域 时 ,用 户 可 能 希望 它 扮演 一 个 导航 组 件 的 
角色 , 使 浏览 器 的 后 退 按钮 遍历 每 一 次 标签 点 击 ， 让 它们 返回 之 前 的 标签 。 这 种 记录 和 恢复 某 个 
特定 标签 视图 的 能 力 通常 称 为 深度 链接 ( deep linking )， 它 是 一 种 补充 性 功能 ， 经 常 被 包括 在 历 
史 和 后 退 按钮 支持 中 。 

1. 支持 书签 和 深度 链接 

要 在 标签 页 组 件 里 实现 次 度 链接 ， 需 要 在 网 页 载 人 时 检查 URIL# 叶 串 ， 如 图 9-6 所 示 。 如 果 它 
对 应 某 个 标签 的 ID ， 脚 本 就 会 自动 选中 并 显示 那个 标签 。 
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code/tabs/history.html#sports 


图 9-6 URL 里 的 # 号 串 


URIL# 号 串 可 以 用 window.location.hash 这 个 JavaScript 属 性 捕捉 到 一 个 变量 里 ,我们 会 用 它 
来 寻找 href 属 性 匹配 这 个 # 号 串 值 的 标签 。 如 果 存 在 这 样 一 个 标签 ， 就 可 以 把 它 传递 给 selectTab 
函数 。 如 果 没 有 找到 匹配 的 标签 (或 是 因为 URL 里 没有 # 号 串 , 或 是 因为 有 # 号 串 但 不 匹配 任何 一 
个 标签 )， 那 么 选中 列表 里 的 第 一 个 标签 作为 备用 措施 : 


// 寻 找 一 个 href 匹 配 URL# 号 串 的 标签 
var hashedTab = tabsNav.find('"'a[href='+ window.location.hash +']'); 
































// 如 果 标签 存在 ， 选 中 它 
if( hashedTab.size() > 0){ 
selectTab(hashedTab); 


} 
// 如 果 不 存 在 ， 选 中 第 一 个 标签 
else { 
selectTab( tabsNav.find('a:first') ); 
} 





现在 ,我 们 的 标签 组 件 具 备 在 指定 # 号 串 时 载 人 正确 标签 的 能 力 了 。 当 然 ， 这 种 能 力 只 有 在 
标签 被 选中 更 新 # 号 串 时 才 有 用 。 为 此 ， 我 们 会 在 selectTab 函 数 的 后 部 加 上 一 行 代码 ， 用 标签 锚 
元 素 的 href ( 对 应 其 标签 面板 的 id ) 来 更 新 URL# 号 串 : 


function selectTab(tab){ 
tabsNav 
.find('li.tabs-selected') 
.removeClass('tabs-selected') 
.find('a') 
.attr('tabindex','-1'); 





tab 
.attr('tabindex','0') 
.parent() 
.addClass('tabs-selected'); 


tabsBody 
.find('div.tabs-panel-selected'') 
.attr('aria-hidden' ,true) 
.removeClass('tabs-panel-selected'); 


$( tab.attr('href') ) 
.addClass('tabs-panel-selected') 
.attr('aria-hidden' ,false); 


// 更 新 # 号 串 以 匹配 选中 的 标签 
window.location.hash = tab.attr('href').replace('#',"'); 


tab[0].focus(); 


3) 
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这 行 代码 的 添加 位 置 刚 好 在 给 标签 指派 焦点 之 前 ， 这 样 就 能 确保 # 号 串 更 新 后 ， 焦 点 回 到 标 
签 上 (这 对 给 键盘 事件 提供 上 下 文 环境 来 说 是 必需 的 )。 

现在 ， 这 些 标 签 会 将 它们 的 状态 报告 给 URIL# 辟 串 ， 让 收藏 和 通过 邮件 发 送 标签 成 为 可 能 。 
但 是 ， 在 实现 这 一 功能 的 过 程 中 ， 我 们 引入 了 一 些 新 的 问题 : 首先 ， 只 要 用 户 点 击 了 某 个 标签 ， 
浏览 器 现在 都 会 滚动 到 标签 面板 那里 ; 其 次 , 我们 破坏 了 后 退 按钮 的 功能 ， 它 不 能 把 用 户 导 航 到 
前 一 个 选中 的 标签 上 ! 

要 修复 滚动 问题 ， 建 议 用 JavaScript 修 改 各 个 标签 面板 的 id 属性 ， 使 它们 不 再 对 应 标签 锚 的 
href 值 。 这 样 的 话 ，URIL# 叶 串 发 生 改 变 时 ， 页 面 上 不 再 有 任何 元 素 的 ID 匹配 这 个 # 叶 果 ， 浏 览 器 
就 不 会 滚动 了 。 当 然 , 修改 这 些 ID 时 ,标签 页 脚本 也 需要 修改 , 改 成 点 击 某 个 标签 时 寻找 这 些 新 
的 ID。 有 具体 的 做 法 是 对 selectTab 函 数 做 一 个 简单 的 调整 ， 将 它 设 置 成 寻找 某 个 标签 面板 ， 其 id 
等 于 # 号 串 值 加 上 你 选择 的 任意 预定 义 前 级 。 

但 是 ,修复 后 退 按 钮 就 需要 做 一 些 额 外 的 工作 了 。 

2. 支持 后 退 按钮 

现在 , 每 当 用 户 选 中 一 个 标签 时 ，URL 会 发 生变 化 , 浏览 器 则 会 把 变化 保存 在 它 的 历史 菜单 
里 。 尺 管 如 此 ， 后 退 按 钮 却 不 会 把 用 户 带 回 他 们 最 近 访 问 过 的 那 一 页 ， 甚 至 前 一 个 标签 也 不 行 。 
事实 上 ， 它 似乎 什么 事 都 不 干 ， 因 为 浏览 器 不 会 自动 刷新 到 与 最 近 的 # 号 串 关联 的 状态 。 

创建 操作 URL# 号 串 的 组 件 时 ,建议 加 入 逻辑 代码 ， 只 要 # 号 串 发 生变 化 就 更 新 组 件 , 无 论 变 
化 来 自 浏 览 器 的 后 退 按 钮 、 前 进 按钮 还 是 历史 菜单 都 是 如 此 。 在 下 面 这 些 情况 下 ， 追 踪 URL# 号 
串 状 态 是 很 有 意义 的 : 

> 当 标 签 页 包含 一 大 块 网 页 内 容 时 ( 因为 用 户 可 能 会 认为 这 些 标签 页 实际 上 是 新 网 页 ); 

> 当 用 户 经 常会 保存 (或 收藏 ) 指向 某 个 特定 标签 状态 的 链接 时 。 

为 那些 在 # 号 串 发 生变 化 时 更 新 的 组 件 提供 支持 应 该 是 很 直观 的 , 但 很 不 幸 , 事实 并 非 如 此 ， 
原因 是 浏览 器 支持 各 异 。 写 作 本 书 时 ， 只 有 Internet Explorer 8 和 Firefox 3.6 支 持 HTML5 的 
hashchange 事 件 ， 这 种 干净 可 靠 的 方法 能 探测 URL# 号 串 何 时 发 生变 化 ， 然 而 其 他 所 有 的 浏览 器 
都 不 能 原生 支持 这 个 事件 ， 因 此 没 办 法 知道 # 写 串 何 时 发 生 了 变化 。 

为 了 支持 其 他 浏览 器 , 我 们 可 以 模拟 原生 的 hashchange 事 件 , 方法 是 设置 一 个 JavaScript 函 数 
定期 检查 URL# 导 串 ， 并 将 它 与 之 前 检查 时 的 值 进行 比较 。 如 果 值 不 同 , # 号 串 就 有 了 变化 ， 此 时 
脚本 可 以 调用 一 个 函数 ， 基 于 新 的 # 号 串 来 更 新 标签 页 。 


// 获 得 当前 # 号 串 
var hash = window.location.hash; 






























































































































































// 检 查 # 号 事变 动 并 相应 地 设置 标签 页 的 函数 
function checkHash(){ 
if(hash != window.1location.hash){ 


//# 号 事变 了 ， 相 应 地 设置 标签 
alert('THE HASH CHANGED!'); 


// 重 置 # 号 事变 量 
hash = window.1location.hash; 





} 


} 
// 每 1/2 秒 运行 一 次 checkHash 函 数 
setInterval(checkHash, 500); 


在 Internet Explorer 7 和 之 前 的 版 本 中 ， 用户 按 下 后 退 按 钮 时 ,浏览 器 总 是 会 向 JavaScript 报 告 
它 在 网 页 载 人 时 得 到 的 原始 URIL# 叶 串 值 ， 哪 伯 事 实 上 它 的 地 址 栏 里 已 经 有 了 可 见 的 变化 ， 因 此 
这 些 流 行 浏 览 器 的 # 号 串 值 是 不 可 靠 的 。 为 了 在 这 些 版 本 的 正 里 支持 后 退 按钮 ， 开 发 者 通常 会 在 
网 页 里 插入 一 个 iframe， 用 它 的 src 属 性 追踪 # 号 串 变 动 ， 因 为 在 点 击 后 退 / 前 进 按钮 时 iframe 的 # 
号 串 能 够 可 靠 地 发 生变 化 。 

这 种 实现 后 退 按 钮 支持 的 方法 是 非常 底层 的 , 它 的 实际 脚本 编程 不 在 本 章 的 讨论 范围 内 , 但 
是 一 些 现 有 的 JavaScript 库 能 服务 于 这 个 目的 。 其 中 一 个 这 样 的 库 叫 做 jQuery History ( 位 于 
www.mikage.to/jquery/jquery_history.html )。 这 个 插件 用 起 来 相当 简单 ， 它 用 一 套 方便 的 程序 包 同 
时 支持 后 退 按钮 和 书签 ， 还 处 理 了 各 种 各 样 的 浏览 带 怪 阁 和 bug。 本 书 所 附 的 脚本 将 此 插件 作为 
一 个 可 选项 。9.4 节 将 介绍 如 何 使 用 它 。 


9.3.2 ”自动 轮换 的 标签 页 


自动 轮换 标签 页 是 男 一 种 网 页 上 常见 的 功能 , 它 的 每 个 面板 都 会 显示 一 段 时 间 , 然后 被 另 一 
个 标签 面板 取代 。 这 种 流行 功能 出 现在 了 新 闻 网 站 的 首页 上 ， 用 来 循环 显示 一 组 当日 热门 文章 。 
这 一 章 里 的 标签 页 几乎 不 用 做 多 少 扩展 工作 就 能 实现 自动 循环 ,脚本 只 需 简 单 地 选 定 初始 标 
签 页 ， 然后 设置 一 个 间隔 循环 ， 在 大 约 5 秒 钟 后 ( 视 标 签 页 内 容 的 长 度 而 定 ) 切换 到 下 一 张 标签 
页 即 可 。 
使 用 jQuery 的 话 这 个 循环 就 会 像 下 面 这 样 : 
// 生 成 一 个 时 间 间 隔 ， 用 于 自动 循环 标签 页 
var tabRotator = setInterval(function(){ 


// 获 得 当前 选中 的 标签 
var CuITTentTabLI = tabsNav.find('1i.tabs-selected'); 












































// 获 得 选中 标签 之 后 的 同 级 标签 
var nextTab = currentTabLI.next(); 


// 如 果 同 级 标签 存在 ， 选 中 它 
if(nextTab.length){ 
selectTab(nextTab.find('a')); 





} 
// 如 果 不 存 在 ， 我们 就 处 于 标签 条 的 末尾 ， 选 择 第 一 个 标签 
else{ 
selectTab( tabsNav.find('a:first') ); 
} 
// 每 5 秒 钟 (5000 ms) 重新 运行 一 次 
}，5000); 





如 果 没 有 办 法 停止 标签 页 循环 的 话 ,这 个 功能 可 能 会 打扰 用 户 。 停 止 自动 循环 的 方法 很 简单 ， 
只 需 用 clearInterval(tabRotator) 语 句 清 除 之 前 设置 的 时 间 间 隔 即 可 。 我 们 建议 每 当 用 户 在 标签 
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页 控件 里 的 任何 位 置 点 击 、 聚 焦 或 按键 时 立刻 运行 这 段 代码 ， 就 像 下 面 这 个 例子 : 


tabs.bind('click keydown focus' ,function(){ 
clearInterval(tabRotator); 
); 


这 一 章 所 附 的 插件 将 此 功能 作为 一 个 可 选项 。 要 了 解 细节 ， 请 务必 阅读 9.4 节 。 


一 


9.3.3 引用 外 部 标签 内 容 


我 们 的 新 闻 标 签 页 组 件 范 例 可 以 进行 扩展 , 用 Ajax 抓 取 外 部 内 容 放 进 面板 里 。 这 个 功能 很 实 
用 , 特别 是 在 你 把 网 站 的 顶部 导航 转换 成 一 个 标签 页 组 件 时 , 这样 用 户 无 须 刷 新 整 张 网 页 就 能 阅 
读 每 个 版 块 的 内 容 。( 这 是 个 很 好 的 例子 ， 显 示 了 文 持 历史 追踪 的 意义 所 在 )。 

Ajax 填 充 式 标签 页 组 件 的 标记 与 本 章 之 前 讨论 的 基础 标记 很 相似 , 但 有 一 点 除外 : 无 序列 表 
里 的 链接 会 引用 外 部 网 页 ， 而 不 是 本 地 内 容 的 锚 (警告 : 我 们 通常 建议 至 少 让 活动 标签 的 内 容 随 
网 页 和 那些 链接 一 起 输出 ， 让 基本 体验 里 的 用 户 能 访问 到 它 )。 点 击 某 个 标签 后 ， 脚 本 根据 链接 
的 href 属 性 生成 一 个 Ajax 请 求 ， 将 外 部 内 容 抓 取 到 某 个 标签 面板 里 。 

强烈 推荐 jQuery UI 的 标签 页 组 件 , 它 是 已 支持 这 种 行为 的 jQuery 插件 里 一 个 绝 佳 的 代表 。 除 
了 Ajax 文 持 之 外 ，jQuery UI 的 标签 页 还 具有 可 折 半 标签 面板 的 能 力 ， 以 及 可 以 用 ThemeRoller 工 
具 添 加 样式 。 可 以 在 jQueryUILcom/download 上 下 载 这 个 标签 页 插件 。 


















































9.3.4 ”将 标签 页 显示 为 手风琴 组 件 


标签 页 和 手风琴 控件 之 间 有 非常 多 的 共同 之 处 ， 虽 然 可 能 因为 视觉 布局 的 差异 而 不 太 明 显 ， 
但 是 它们 的 行为 几乎 完全 相同 的 。 两 者 都 能 切换 内 容 面 板 的 显示 ， 而 且 每 次 只 能 查看 一 个 面板 。 

从 技术 上 看 , 这 两 种 控件 背后 的 标记 也 可 以 非常 相似 , 但 是 源 代码 顺序 根据 实现 方式 的 不 同 
可 能 会 有 变化 。 举 个 例子 , 这 一 章 展 示 的 基础 标记 包括 了 一 张 无 序 列表 , 后 面 跟 着 所 有 的 内 容 面 
板 , 而 手风琴 组 件 的 源 代码 顺序 可 能 会 是 内 容 尖 和 内 容 块 交替 摆 放 ,反映 出 它们 的 视觉 呈现 顺序 。 
抛 开 源 代码 顺序 不 谈 ， 手 风琴 组 件 的 HIML 属 性 可 以 和 本 章 描 述 的 标签 页 完全 一 致 ， 包 括 ARIA 
角色 和 状态 。 事 实 上 ， 因 为 手 风 和 组件 和 标签 页 如 此 相似 ， 所 以 ARIA 甚 至 都 没有 为 它 设 计 一 个 
角色 。W3C 推 荐 的 手风琴 组 件 实 现 方法 实际 上 是 使 用 标签 页 的 角色 。 

一 个 遵循 本 章 原 则 的 优秀 手 风 雁 控件 范例 可 以 在 这 里 找到 : http://test.cita.uiuc.edu/aria/ 
tabpanel/tabpanel2.php。 


9.4 使 用 标签 页 脚本 


本 书 所 附 的 标签 页 演示 和 代码 (网址 是 www.filamentgroup.com/dwpe ) 包含 一 个 可 重复 使 用 
且 用 法 简单 的 插件 : jQuery.tabsjs。 它 集成 了 本 章 概 述 的 那些 脚本 ， 可 在 你 的 项 目 里 使 用 。 

要 在 网 页 里 使 用 这 个 脚本 , 只 需 下 载 并 引用 标签 页 组 件 演 示 页 里 列 出 的 那些 文件 , 然后 在 标 
签 内 容 的 父 容器 上 简单 地 调用 tabs 方 法 即 可 。 举 个 例子 ， 如 果 你 使 用 的 是 本 章 提 供 的 基础 标记 ， 
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就 可 以 在 ID 为 featured 的 div 上 简单 地 调用 tabs 方 法 : 

$('#featured).tabs(); 
标签 内 容 的 标记 需要 遵循 与 本 章 范 例 相 同 的 结构 :一 个 父 标 签 容器 存放 锁链 接 组 成 的 无 序列 
表 ， 后 面 跟 着 一 个 div， 内 含 一 组 对 应 的 标签 内 容 面 板 。 
标签 页 插件 还 有 两 个 配置 选项 ， 用 来 支持 可 收藏 的 标签 URL 和 后 退 按钮 。 要 使 用 这 些 功 能 ， 
需要 加 入 对 jQuery History 插 件 脚 本 的 引用 。 请 参见 历史 标签 范例 页 ， 了解 如 何 正确 引用 所 有 必需 
的 脚本 文件 。 

在 我 们 的 标签 页 插件 里 ,状态 追踪 功能 默认 是 禁用 的 ,不 过 可 以 通过 trackstate 选 项 ( 它 接 
受 一 个 true/false 值 ) 启用 它们 : 


$('#featured).tabs({ 
trackState: true 


})); 

启用 状态 追踪 后 ， 还 需要 提供 服务 器 上 某 个 空白 网 页 的 URL， 用 它 追 踪 历 史 ( 请 阅读 jQuery 
History 插 件 的 文档 , 了 解 此 处 的 更 多 信息 )。 srcPath 选 项 的 默认 值 是 jQuery.history.blank.html， 
可 以 用 任意 空白 文件 路 径 覆 盖 它 : 


$('#tabs' ) .tabs({ 
trackState: true, 
STCPath: 'blank.html' 
)); 


我 们 的 标签 页 插件 还 支持 自动 循环 , 它 默认 是 禁用 的 , 不 过 可 以 通过 autoRotate 选 项 来 激活 ， 
方法 是 设置 一 个 你 想 要 的 时 间 间 隔 ， 以 毫秒 为 单位 : 


$('#featured).tabs({ 
autoRotate: 5000 


)); 

现在 你 应 该 理解 了 如 何 创建 一 个 功能 完备 且 可 访问 的 标签 页 组 件 。 你 能 看 到 如 何 组 织 内 容 ， 
以 及 添加 关键 的 ARIA 属 性 和 键盘 导航 行为 ， 使 它 真 正 对 所 有 人 可 用 。 标 签 页 组 件 可 以 用 于 或 小 
或 大 的 内 容 块 ， 因 此 考虑 用 户 对 书签 支持 和 后 退 按钮 行为 的 期 望 , 能 大 大 改善 用 户 体验 。 本 章 讨 
论 了 追踪 井 号 串 状态 和 保留 后 退 按钮 支持 , 它们 的 核心 技巧 和 原则 也 适用 于 各 种 各 样 的 交互 型 及 
Ajax 驱动 型 组 件 。 





















































工具 提示 ( tooltip ) 用 于 在 界面 里 “ 按 需 ”呈现 内 容 (通常 是 次 要 的 内 容 ， 例 如 图 标 按钮 的 
简单 文字 描述 ， 图 表 里 某 个 数据 点 的 细节 或 者 表单 里 帮助 性 的 字段 操作 说 明 )， 证 用 户 在 不 打 断 
阅读 或 操作 的 情况 下 获取 更 多 的 上 下 文 信息 。 工 具 提 示 的 内 容 一 般 会 显示 为 一 小 块 到 加 层 ， 当 用 
户 把 光标 放 到 某 个 元 素 上 时 出 现 。 
大 多 数 浏览 器 默认 包含 一 个 标准 的 工具 提示 功能 : 任何 指派 给 HTML 标 签 内 title 属 性 的 内 
容 都 会 泻 染 成 一 条 工具 提示 ， 当 用 户 将 光标 悬 停 在 某 元 素 上 1 秒 钟 左右 显示 。 但 是 ， 这 些 标准 浏 
览 锅 工具 提示 具有 固定 的 外 观 〈 文 字 大 小 通常 是 固定 的 ， 位 于 光标 右 侧 一 个 黄色 方块 内 )， 无 法 
用 CSS 修 改 。 它 们 的 内 容 也 有 限制 ， 必 须 是 文本 字符 串 ， 不 能 使 用 HTML 标 签 、 图 像 、 背 景 图 像 
或 其 他 可 以 用 来 引入 样式 、 结 构 或 层级 的 格式 。 它 们 甚至 都 不 支持 换行 ! 在 一 些 浏览 絮 里 , 工具 
提示 不 支持 换行 ， 所 有 文化 都 在 一 行 显示 。 如 果 文 化 过 长 ， 可 能 会 超出 可 见 的 浏览 器 窗口 。 
在 许多 情况 下 ， 一 种 更 加 健壮 的 工具 提示 是 很 有 用 的 ， 其 中 包括 下 面 这 些 情 况 。 
P> 拥有 特色 风格 设计 的 网 站 ,， 它 包括 了 圆 角 、 阴 影 、 边 框 和 背景 等 高 级 CSS 格 式 ， 工 具 提 示 
应 当 反 映 出 现 有 的 设计 。 

> 显示 产品 图 像 、 富 格式 文本 或 者 复杂 布局 的 电子 商务 网 站 。 举 个 例子 , Netflix 的 电影 提示 
包含 一 张 照片 ， 一 段 剧情 简介 和 一 张 表 格 ， 表 格 里 列 出 了 导演 、 演 员 、 格 式 、 类 型 和 用 
户 评分 。 

> 服务 于 老年 /少年 用 户 或 视力 障碍 用 户 的 网 站 。 在 那里 ， 显 示 字 体 更 大 、 对 比 度 更 高 的 工 
有 具 提示 要 比 原生 工具 提示 更 有 帮助 。 

本 章 会 探索 创建 自 定义 工具 提示 的 一 些 方法 。 我 们 会 使 用 能 实现 各 种 自 定 义 外 观 和 行为 的 渐 
进 增强 技巧 , 并 加 入 可 访问 性 所 需 的 语义 标记 结构 。 有 具体 来 说 , 我 们 会 讨论 如 何 装饰 和 显示 一 个 
基于 title 属 性 值 的 简单 工具 提示 ， 之 后 则 是 一 个 更 为 复杂 的 工具 提示 ， 它 的 层级 结构 是 基于 网 
页 内 容 或 用 Ajax 从 外 部 网 页 抓 取 来 的 。 

































































10.1 X 光 透视 


就 工具 提示 的 目标 设计 而 言 ， 我 们 会 考虑 一 个 经 常用 到 工具 提示 的 案例 : 一 张 注册 表单 。 
为 了 保持 表单 外 观 的 简单 清爽 ,我们 会 使 用 工具 提示 选择 性 地 提供 注册 人 实现 零 错误 注册 所 
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需 的 全 部 信息 ， 在 他 们 将 光标 悬 停 在 标签 和 链接 上 时 显示 。 我 们 的 目标 设计 如 图 10-1 所 示 。 


| _ Register Now 
All fields are required 


Email Address @ 


Password @ 
We'll ask this question to confirm your identity 
有, if you forget your password. 
Secret Question Ro 


Secret Answer @ 


Reoi | Privacy policy 
rg Medd Benefits of registering 























图 10-1 增强 体验 里 的 表单 字段 工具 提示 


这 张 表 单 里 有 两 种 不 同类 型 的 内 容 适合 使 用 工具 提示 。 

> 简短 的 字段 操作 说 明 ， 比 如 格式 指南 ， 或 者 关于 每 个 文本 框 里 数据 使 用 方式 的 信息 。 

PP “隐私 政策 ”( Privacy Policy ) 和 “注册 好 处 ”( Benefits of Registering ) 的 内 容 。 用 户 可 

能 选择 先 查看 它们 ， 然 后 再 进入 下 一 步 (请 见 表单 底部 的 链接 )。 

在 增强 体验 里 , 每 个 文本 框 的 操作 说 明 会 放 到 工具 提示 里 , 在 用 户 把 光标 悬 停 到 该 字段 的 标 
签 上 时 显示 。 这 一 设计 还 包括 一 个 位 于 各 个 标签 右 侧 的 小 “i ”图 标 作为 视觉 指示 ， 表 明 有 额外 
的 信息 可 用 。 如 果 用 户 把 光标 悬 停 在 这 个 图 标 上 ,工具 提示 也 会 出 现 。 屏 幕 阅 读 器 用 户 把 焦点 移 
到 关联 字段 上 时 ,工具 提示 还 会 被 朗读 出 来 。 操 作 说 明 是 纯 文 本 的 ,不 需要 任何 特殊 的 功能 或 行 
为 。 简 单 地 说 ， 它 们 的 表现 就 像 那 些 在 指定 title 属 性 时 出 现 的 标准 工具 提示 一 样 。 因 此 ， 在 基 
础 标记 里 , 我 们 会 给 每 个 label 元 素 简单 地 添加 一 个 title 属 性 , 然后 为 增强 体验 编写 一 小 段 脚 本 ， 
用 来 解析 各 个 title 属 性 里 的 内 容 ， 并 将 其 展现 在 一 个 自 定义 样式 的 工具 提示 里 (字体 和 设计 都 
更 漂亮 )。 

位 于 表单 底部 的 “隐私 政策 ”和 “注册 好 处 ”这 两 个 链接 ,会 分 别 显示 一 小 段 隐 私 政 策 声明 
和 一 大 块 解释 注册 好 处 的 内 容 。 我 们 会 将 这 两 种 内 容 块 都 作为 工具 提示 显示 , 因为 它们 是 补充 性 
的 信息 ， 不 是 填写 或 提交 这 张 表 单 所 必需 的 。 

隐私 政策 的 内 容 是 一 个 介绍 性 的 段落 ， 之 后 跟着 一 张 简 单 的 项 目 符号 列表 ， 如 图 10-2 所 示 。 
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Register Now 
All fields are required 


Email Address @ | 


Password @ Our privacy policy 
We are committed to protecting your 
Privacy. Here is our commitment to you: 


Secret Question © ®» All your personal data is securely 
transmitted and stored with 128 bit 


encryption 


sa We will never sell any of your personal 
Secret Answer © information to a 3rd party 


se We won'temail you marketing messages or 
other annoying spam, ever 





| 
| Register now Denefts of Nsistering 





图 10-2 ”增强 体验 里 的 隐私 政策 工具 提示 


因为 隐私 信息 既 简 短 又 重要 , 需要 在 注册 时 传达 给 大 多 数 受 众 , 所 以 在 基本 体验 里 , 我 们 会 
把 它 放 在 基础 标记 页 面 里 的 表单 正 下 方 ， 如 图 10-3 所 示 。 








Register Now 


All fields are required 


Email Addres 








” To keep spammers out, we'll send a confirmation emall to make surethis is a 
valid email address 


Password 


Secret Question 
Secret Answer 


( Register now ) 


® Privacy policy 
® Benefits of registering 


Our privacy policy 
We are committed to protecting your privacy. Here is our commitment to you: 


® All your personal data is securely transmitted and stored with 128 bit encryption 
® We will never sell any of your personal information to a 3rd party 
® We won't email you marketing messages or other annoying spam, ever 











图 10-3 ”基本 体验 里 ， 隐 私 政策 的 内 容 显 示 在 表单 下 方 
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基本 体验 里 的 “隐私 政策 ”链接 会 是 一 个 锚 链 接 , 用 户 点 击 时 将 页 面向 下 滚动 到 隐私 内 容 上 。 
为 此 ,我们 会 让 此 链接 的 hzref 属 性 匹配 隐私 内 容 块 的 ID ,再 加 上 一 个 井 号 字符 ( href="#privacy" )。 
在 增强 体验 里 ,我 们 会 用 一 个 脚本 找到 锚 链 接 的 href 属 性 和 它 关 联 的 内 容 , 然后 在 用 户 将 光标 悬 
停 到 链接 上 时 ， 把 该 内 容 作为 一 条 工具 提示 显示 出 来 。 

最 后 同样 重要 的 是 ,“ 注 册 好 处 ”的 内 容 由 相当 长 的 一 组 功能 和 好 处 介绍 组 成 ， 还 带 有 一 张 
显示 “免费 加 入 ”( Freeto Jo ) 的 图 片 ， 如 图 10-4 所 示 。 




















Register Now 
All fields are required 


Email Address © 


Why join? 


Creating your FREE account 
Password 8 lets you tap into all these 
great features and benefits: 


。 Unlimited storage for your 
les 


Secret Question © 
。 Share and collaborate with your friends and 
family 


Secret Answer © 。 Receive real-time alerts with your friends 
status updates 


。 Free toaster and cozy with account signup 





- ER 。 Plus get a special gift when you joinl 
| Register now Benefits of regist\ 


ee 





10-4 增强 体验 里 的 功能 和 好 处 介绍 工具 提示 


虽然 对 许多 人 有 帮助 ,而 且 可 能 让 人 感 兴 趣 ,但 它 就 完成 表单 而 言 并 不 像 隐私 信息 那样 关键 。 
因此 , 我 们 在 基本 体验 里 会 把 好 处 的 内 容 单独 放 在 一 个 网 页 里 (benefits.html ), 用 户 可 以 点 击 “ 注 
册 好 处 ”链接 来 访问 它 。 又 因为 我 们 不 想 把 用 户 带 入 死胡同 ， 所 以 会 确保 那 张 单独 的 好 处 网 页 能 
链接 回 注册 表单 ， 如 图 10-5 所 示 。 








了 FREEY 


Why join? 


Creating your FREE account lets you tap into all these great features and benefits: 


® Unlimited storage for your files 

® Share and collaborate with your friends and family 

® Receive real-time alerts with your friends status updates 
e Free toaster and cozy with account signup 

® Plus, get a special gift when you joint 


Still not convinced? If you'd like to learn more, check out our product demo or feature tour. 








Ready? Register now 








图 10-5 ”单独 一 个 网 页 里 的 功能 和 好 人 处 内 容 
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在 增强 体验 里 ， 我 们 会 用 一 个 脚本 找到 链接 的 href 值 (benefits.html )， 然 后 生成 一 个 Ajax 请 
求 来 抓 取 该 网 页 的 内 容 ， 放 入 注册 表单 并 显示 为 一 条 工具 提示 。 

让 人 高 兴 的 是 , 我 们 可 以 在 这 三 种 类 型 的 工具 提示 里 重复 使 用 很 大 一 部 分 的 标记 、 样 式 和 脚 
本 。 首 先 来 看 基于 title 的 简单 工具 提示 ， 然 后 概述 用 销 链接 创建 工具 提示 需要 的 修改 ， 最 后 讨 
论 如 何 用 外 部 来 源 的 内 容 创建 工具 提示 。 








10.2 用 title 内 容 创建 工具 提示 
我 们 会 先 从 最 简单 的 工具 提示 开始 : 表单 各 个 标签 边 上 显示 的 字段 操作 说 明文 字 。 
10.2.1 基础 标记 和 样式 


注册 表单 里 的 每 个 字段 都 由 一 对 1label 和 input 组 成 ，label 的 for 属 性 指向 输入 框 的 id 以 正确 
关联 两 者 。input 还 带 有 一 个 text 类 ， 可 以 用 它 来 应 用 样式 规则 : 

<label for="email">Email Address</label> 

<input type="text" name="user" id="email" class="text" /> 

我 们 会 给 每 个 label 都 深 加 一 个 title 属 性 ， 内 含 操作 说 明 ， 解释 如 何 正 确 填 写 这 个 字段 , 或 
者 提供 有 关 数 据 使 用 方式 的 反馈 : 


<label for="email" title="To keep spammers out, we'll send a confirmation 
email to make sure this is a valid email address">Email Address</label> 























<input type="text" name="user" id="email" class="text" /> 
在 大 多 数 浏览 器 里 ， 当 鼠标 移 到 标签 上 方 时 ，title 
图 10-6 所 示 。 








亚 
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生 会 显示 为 一 条 简单 的 工具 提示 ， 如 
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Email Ns 
“To keep spammers out, we'll send a confirmation email to make sure this is a 
valid email address 
































10-6 ”原生 的 浏览 器 工具 提示 在 光标 悬 停 时 显示 在 标签 下 方 


在 基本 体验 里 , 我 们 可 以 给 基础 标记 添加 许多 安全 样式 。 为 了 让 这 张 表单 更 容易 阅读 ( 以 及 
更 有 吸引 力 )， 我 们 会 设置 全 局 字体 样式 : 

body { font-family: "Segoe UI", Arial, sans-serif; } 

接 下 来 , 我 们 会 提供 一 些 视觉 线索 ,表明 此 标签 有 一 条 工具 提示 。 我们 会 将 样式 属性 cursor 
设置 为 heljp， 使 光标 在 悬 停 于 标签 上 时 看 上 去 像 个 问号 (? ) 我 们 还 会 给 标签 文字 加 上 点 状 的 
下 划 线 ， 这 是 一 种 相当 常见 的 Web 惯 例 ， 用 来 表明 存在 工具 提示 ， 如 图 10-7 所 示 。 


label { cursor: help; border-bottom: 1px dashed #777; } 
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为 了 让 表单 更 易于 浏览 , 可 以 把 标签 堆 和 琶 到 输入 框 上 方 , 方法 是 将 它 设置 为 display: block， 
并 添加 一 点 顶部 外 边 距 


input.text { display: block; margin: .5em 0 0; } 





Emal CS 





2 To keep spammers out, we'll send a confirmation email to make sure this is a 
valid email address 











图 10-7 ”应 用 安全 样式 后 的 基础 标记 





10.2.2 ”增强 标记 和 样式 


在 增强 体验 里 , 我 们 会 为 表单 和 工具 提示 共同 创建 样式 , 全 部 三 种 类 型 的 工具 提示 都 可 以 借 
用 它 。 
为 了 显示 表单 里 有 可 用 的 工具 提示 ， 我 们 会 在 1abel 右 侧 添 加 一 个 小 “i” 图 标 背 景 图 像 ( 代 
i ge es ee )。 我 们 会 移 除 各 个 标签 的 底部 边框 样式 属性 ， 为 图 标 指定 一 
张 背景 图 像 ， 并 添加 右 侧 内 边 距 来 确保 文字 ( 即 Email Address ) 不 会 遮 住 这 个 图 标 : 


label { 
font-size:1.5em; 
text-align:1left; 
margin-top:.8em; 
margin-bottom: .3em; 
border-bottom: 0; 
display: block; 
float: left; 
background: url(../images/icon-info.png) right 3px no-repeat; 
font-size:1.5em; 
padding-right:20px; 
text-align:1left; 

} 


现在 ， 表 单字 段 看 起 来 就 像 是 我 们 的 目标 设计 了 ， 如 图 10-8 所 示 。 























Email Address © 

















图 10-8 “应 用 增强 样式 后 的 邮箱 表单 字段 
为 了 在 增强 体验 里 实现 自 定义 的 工具 提示 内 容 , 需要 生成 一 小 段 HTML 并 加 上 样式 , 使 它 看 
起 来 像 目标 工具 提示 设计 。 这 段 标记 是 一 个 带 有 tooltip 类 的 简单 div: 


<div class="tooltip">To keep spammers out, we'll send a confirmation email 
to make sure this is a valid email address</div> 
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工具 提示 的 div 会 被 加 上 一 些 样式 , 比如 背景 图 像 ,边框 和 内 边 距 , 透明 度 则 设置 成 90%， 
从 而 创建 出 一 种 半 透 明 的 效果 ( 这 个 属性 不 能 被 旧版 的 Internet Explorer 识 别 ， 但 不 会 造成 危害 )。 
我 们 会 把 工具 提示 绝对 定位 到 网 页 上 ， 这 样 以 后 就 可 以 用 脚本 动态 设置 顶部 和 左 侧 的 坐标 了 : 


.tooltip { 
position:absolute; 
background:#252122 url(../images/bg-tooltip.gif) top repeat-x; 
padding:12px 18px; 
font-size:1.2em; 
line-height:1.4; 
border:2px solid #fff; 
width:250px; 
color:#ffTf; 
opacity: .9; 





为 了 进一步 在 视觉 上 打磨 这 个 工具 提示 而 不 需要 使 用 多 张 背景 图 像 )， 我 们 会 添加 一 些 浏 
览 器 专用 和 基于 标准 的 CSS3 属 性 : border-radius 用 于 圆 化 边 角 ，box-shadow 用 于 在 工具 提示 朝 
后 生成 阴影 。 这 些 属 性 会 显示 在 新 版 的 卫 、 火 狐 、Safari 和 Opera 浏 览 需 上 ， 如 图 10-9 所 示 。 在 其 
他 浏览 器 上 ， 工 具 提 示 会 显示 出 其 他 所 有 的 样式 规则 ， 但 边 角 是 方形 的 ， 也 没有 阴影 : 


.tooltip { 
position:absolute; 
background:#252122 url(../images/bg-tooltip.gif) top repeat-x; 
padding:12px 18px; 
font-size:1.2em; 
line-height:140%; 
border:2px solid #fff; 
width:250px; 
color:#fff; 
opacity: .9; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
border-radius: 5px; 
-0-box-shadow: 0 0 5px #aaa; 
-moz-box-shadow: 0 0 5px #aaa; 
-webkit-box-shadow: 0 0 5px #aaa; 
box-shadow: 0 0 5px #aaa; 














To keep spammers out, we'll send a 


confirmation email to make sure this is a valid 
email address 























图 10-9 应 用 样式 后 的 工具 提示 增强 标记 
为 了 显示 和 隐藏 工具 提示 ， 我 们 还 会 添加 一 个 名 为 tooltip-hidden 的 类 ,用 它 把 工具 提示 的 
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display 属 性 设置 为 none， 然 后 用 脚本 有 条 件 地 切换 开启 和 关闭 。 
.tooltip-hidden { display: none; } 


10.2.3 ”工具 提示 增强 脚本 


完成 基础 和 增强 标记 以 及 样式 之 后 , 现在 编写 用 于 创建 和 显示 工具 提示 的 增强 脚本 。 和 样式 
一 样 ,许多 行为 (包括 容器 定义 和 用 来 正确 定位 它们 的 鼠标 事件 ) 都 可 以 一 次 编写 , 重复 用 于 全 
部 三 种 类 型 的 工具 提示 。 

首先 , 创建 一 些 变 量 , 用 来 生成 增强 的 工具 提示 : 关联 邮箱 文本 input 的 1abel 元 素 , 标签 title 
的 值 , 以 及 一 个 指派 给 工具 提示 div 的 唯一 ,用 来 为 屏幕 阅读 器 用 户 关联 标签 和 自 定义 工具 提示 : 


var label = $('label[for=email]'); var tooltipContent = label.attr('title'); var tooltipID = 
"email-tooltip"; 


现在 ， 我 们 可 以 生成 工具 提示 的 标记 了 : 一 个 新 div 元 素 ，id 为 email-tooltip， 内 容 来 自 标 
签 的 title (存储 在 变量 tooltipContent 里 )。 我 们 会 给 它 指派 tooltip 和 tooltip-hidden 这 两 个 类 ， 
这 样 就 能 用 CSS 修 改 这 个 div 的 样式 ， 并 确保 它 默认 是 隐藏 的 。 我 们 还 会 给 它 添加 tooltip 这 个 
ARIA role， 问 屏幕 阅读 器 用 户 描述 它 的 用 途 ， 男 一 个 aria-hidden 属 性 则 告诉 屏幕 阅读 器 它 当 前 
是 隐藏 的 : 


var tooltip = $('<div class="tooltip tooltip-hidden" role="tooltip" id="'+ tooltipID +"'" 
aria-hidden="true">'+ tooltipContent +'</div>'); 


然后 ,我们 会 把 工具 提示 附加 到 网 页 body 的 尾部 : 

tooltip.appendTo( "body ); 

为 了 让 屏幕 阅读 器 识别 这 些 工 具 提示 ， 我 们 会 给 body 元 素 添 加 application 这 个 ARIA role: 

$("body ' ) .attr( "Tole'，application' ); 

我 们 已 经 生成 了 工具 提示 的 标记 ， 现 在 应 该 把 label 的 title 属 性 移 除 ， 以 避免 那些 被 复制 的 
原生 工具 提示 显示 出 来 。 为 了 让 与 1abe1 有 关 的 新 自 定义 工具 提示 能 够 被 屏幕 阅读 器 访问 ， 我 们 
会 关联 它们 ， 方 法 是 给 标签 指派 aria-describedby 这 个 ARIA 属 性 ， 将 它 设置 成 与 工具 提示 的 id 
相同 的 值 : 

label.removeAttr('title').attr('aria-describedby' , tooltipID); 

接 下 来 ,我 们 会 让 工具 提示 在 mouseover 时 显示 ， 在 mouseout 时 隐藏。 我 们 会 给 1abel 绑 定 一 
个 mouseover 事 件 ,在 悬 停 时 显示 工具 提示 ,方法 是 移 除 它 的 tooltip-hidden 类 ,将 它 的 aria-hidden 
属性 设置 成 false， 并 将 工具 提示 的 坐标 定位 到 网 页 里 光标 位 置 的 旁边 。 我 们 还 可 以 通过 向 
mouseover 事 件 的 回调 函数 传递 一 个 变量 参数 (e ) 来 获取 mouseover 事 件 的 相关 信息 : 比方 说 找 出 
鼠标 的 x 和 y 坐 标 ， 就 像 在 下 面 代码 里 操作 的 参数 e.pageY 和 e.pageX: 


label .mouseout(function(e){ 
tooltip.removeClass('tooltip-hidden') 
.attr('aria-hidden' ,false) 
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.css({ 
top: e.pageY - tooltip.outerHeight()， 
left: e.pageX + 20 
]); 
}) 


我 们 会 绑 定 一 个 mouseout 事 件 ， 这 样 当 用 户 将 光标 从 标签 上 移 开 时 ，tooltip-hidden 会 被 重 
新 应 用 ，aria-hidden 属 性 则 设置 回 true: 


label.mouseout(function(){ 
tooltip.addClass('tooltip-hidden') 
.attr('aria-hidden' ,true); 


}); 

为 了 让 工具 提示 对 屏幕 阅读 器 用 户 完全 可 访问 ， 还 必须 做 最 后 一 步 : 确保 与 label 关 联 的 文 
本 input 具备 aria-describedby 属 性 。 应 用 这 个 属性 后 ， 1 读 器 用 户 就 可 以 访问 到 额外 的 描述 
性 信息 。 根 据 屏幕 阅读 器 的 不 同 ， 工 具 提 示 会 在 屏幕 阅读 器 用 户 将 焦点 放 到 ;input 上 时 读 出 ,或 
者 会 在 用 户 按 下 组 合 键 时 读 出 。 

$('#' + $(this).attr('for')).attr('aria-describedby', tooltipID); 


现在 , 我 们 就 有 了 一 个 基于 原生 title 属 性 、 功能 完备 的 增强 自 定义 工具 提示 , 如 图 10-10 所 示 。 





















































To keep spammers out we'll send a 


confirmation email to make sure this is a valid 
email address 





Email Address Ro 


























图 10-10 ”增强 体验 里 的 工具 提示 


这 种 基于 title 的 方法 非常 适合 那些 基于 文本 的 简单 工具 提示 ， 但 无 法 用 于 文字 格式 更 丰富 
的 内 容 。 接 下 来 讨论 的 两 种 方法 会 演示 如 何 用 结构 性 内 容 创 建 增强 提示 , 这 些 内 容 或 者 来 自 于 网 
页 上 的 不 同 版 块 ， 或 者 来 自 于 某 个 外 部 资源 。 


10.3 用 锚 链 接 创建 工具 提示 


我 们 经 常 使 用 本 地 锚 链 接 提 供 从 页 面 某 一 区 域 到 另 一 区 域 的 快速 导航 。 为 此 , 只 需要 把 锚 元 
素 的 href 值 设 为 井 号 加 上 网 页 目标 元 素 的 id 即 可 。 用 这 种 方式 设置 href 后 ， 点 击 锚 点 会 将 焦点 转 
移 到 对 应 的 元 素 上 ， 浏 览 器 则 会 立刻 滚动 至 那个 获得 焦点 的 元 素 〈 只 要 网 页 高 度 允 许 )。 可 以 使 
用 JavaScript 和 链接 的 href 值 找到 网 页 上 的 关联 内 容 ， 用 它 在 增强 体验 里 生成 一 条 工具 提示 。 

首先 ,我 们 将 “隐私 政策 ”内 容 写 在 基础 网 页 标记 里 的 注册 表单 下 方 , 并 指派 一 个 值 为 privacy 
的 id: 


<div id="privacy"> 


























<h2>0ur privacy policy</h2> 
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《p> 我 们 致力 于 保护 你 的 隐私 。 这 是 我 们 对 你 的 承诺 。</p> 
<U]> 
<1i> 你 的 所 有 个 人 信息 部 会 安全 传输 ， 并 且 以 128 比 特 加 密 存 储 </]i> 
<li> 我 们 绝 不 会 将 你 的 个 人 信息 卖 给 第 三 方 </1i> 
《1i3> 我 们 绝 不 会 通过 电子 邮件 向 你 发 送 营销 信息 或 其 他 讨厌 的 垃圾 邮件 </1i> 
</ul> 
</div> 


与 它 关 联 的 链接 在 基本 体验 里 是 一 个 标准 的 本 地 锚 点 , 将 用 户 滚动 到 网 页 的 这 个 版 块 上 。 为 
此 ,将 “隐私 政策 ”链接 的 href 设 置 成 引用 隐私 内 容 : 
<a href="#privacy">Privacy policy</ay> 


在 基本 体验 里 ， 这 个 链接 会 将 浏览 带 窗 口 深 动 到 隐私 政策 内 容 块 上 ， 如 图 10-11 所 示 。 





Register Now 


All fields are required 


Email Address 


Password 
Secret Question 


Secret Answer 





(CRegister now ) 


® Privacy policy 
® Benefits of registering 


Our privacy policy 
We are committed to protecting your privacy. Here is our commitment to you: 


® All your personal data is securely transmitted and stored with 128 bit encryption 
® We will never sell any of your personal information to a 3rd party 
® We won't email you marketing messages or other annoying spam, ever 











图 10-11 基本 体验 里 位 于 表单 下 方 的 隐私 政策 内 容 


把 内 容 放 入 网 页 ， 关 联 锚 和 对 应 的 内 容 块 之 后 ， 就 可 以 修改 之 前 基于 title 的 工具 提示 范例 
里 的 JavaScript， 用 链接 的 href 值 找到 网 页 上 的 关联 内 容 , 然后 生成 一 条 工具 提示 。 只 需要 修改 脚 
本 ， 更换 我 们 将 内 容 插 入 工具 提示 的 方式 。 

首先 ， 用 tooltipID 变 量 创 建 一 个 新 的 空白 工具 提示 div: 


var tooltip = $('<div class="tooltip" role="tooltip" id="'+ tooltipID +'"></div>'); 
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为 任何 本 地 锚 点 的 href ( 井 号 加 上 id 属性 的 值 ) 和 jQuery 需要 用 来 查找 网 页 上 工具 提示 内 
容 的 选择 占 ， 有 着 相同 的 语法 〈 在 此 案例 中 是 却 rivacy )， 所 以 脚本 可 以 简单 地 引用 整个 href 值 ， 
找到 工具 提示 的 内 容 : content:$(this).attr('href')。 

剩 下 的 就 是 把 隐私 内 容 附 加 到 空白 的 工具 提示 里 : 

tooltip.append( $(this).attr('href') ); 





注意 用 这 种 方式 附加 内 容 时 (无 论 是 这 里 显示 的 jQuery append 方 法 ， 还 是 标准 的 
JavaScriptappendChild 方 法 )， 它 实际 上 会 被 从 标记 里 原来 的 位 置 移 到 工具 提示 容器 里 ， 
因此 无 须 进 行 标 记 “ 清 理 ”。 





最 后 ,借助 现 有 的 样式 和 脚本 逻辑 ,在 用 户 将 光标 悬 停 在 “隐私 政策 ”链接 上 时 显示 新 的 自 
定义 工具 提示 ， 如 图 10-12 所 示 。 


Register Now 
All fields are required 


Email Address @ 


Password @ Our privacy policy 
We are committed to protecting your 
Privacy. Here is our commnitment to you: 


Secret Question 6 e All your personal data is securely 
transmitted and stored with 128 bit 
encryption 

se We will never sell any of your personal 
Secret Answer © information to a 3rd party 


s We won'temail you marketing messages or 
other annoying spam, ever 








Registar now a 
































图 10-12 ”增强 体验 里 的 隐私 政策 工具 提示 





10.4 用 外 部 来 源 创 建 工具 提示 


我 们 已 经 展示 了 如 何 从 某 个 title 属 性 获取 工具 提示 内 容 ， 以 及 如 何 利用 本 地 锚 链 接 的 href 
值 。 现 在 来 分 析 如 何 从 一 张 单独 的 链接 页 里 获取 内 容 。 


<a href="benefits.html">Benefits of registering</a> 
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在 增强 体验 里 ,我 们 会 用 Ajax 从 服务 器 请 求 这 张 网 页 的 内 容 , 然后 生成 工具 提示 。 理想 情况 
下 ，Web 服 务 器 足够 智能 ， 能 够 判断 是 发 送 整 张 HTIML 网 页 ， 还 是 ( 当 请 求 来 自 Ajax 时 ) 只 发 送 
生成 工具 提示 所 需 的 轻 量 级 标记 片段 。 如 果 我 们 有 一 台 智 能 服务 器 被 配置 成 当 请 求 来 自 Ajax 时 用 
不 同 的 方式 处 理 ， 那 么 就 可 以 利用 jQuery 的 load 方 法 ， 借 助 Ajax 来 请 求 那 张 好 处 页 面 ， 服 务 器 则 
会 明白 只 需 返 回 网 页 内 容 的 子 集 即 可 。1load 方 法 提供 了 一 种 极其 简单 的 界面 来 用 Ajax 载 人 外 部 内 
容 ， 只 需要 一 个 URL 人 参数 就 能 完成 载 人 工作 。 

我 们 的 增强 脚本 可 以 从 链接 的 href 里 抓 取 URL， 将 它 附加 到 工具 提示 的 div 上 : 

tooltip.load( $(this).attr('href')); 

有 些 情 况 下 这 种 智能 服务 器 方式 可 能 用 不 了 , 原因 或 者 是 你 没有 服务 器 的 完全 访问 权限 , 或 
者 是 缺乏 编写 脚本 逻辑 的 专业 技能 。 在 这 些 情况 下 ， 可 以 用 Ajax 抓 取 一 整 张 href 里 引用 的 好 处 页 
(包括 完整 的 文档 head 和 body )， 然 后 编写 JavaScript 逻 辑 解 析出 文档 的 相关 部 分 , 将 其 插入 到 工具 
提示 的 div 里 。1oad 方 法 提供 了 一 种 精妙 的 方式 来 抓 取 我 们 需要 的 标记 ， 你 只 需要 指出 完整 网 页 
里 我 们 需要 的 工具 提示 内 容 ( 即 它 的 选择 器 : #content ), 之 后 jQuery 就 会 将 相关 代码 片段 插入 到 
我 们 的 工具 提示 里 ， 如 图 10-13 所 示 。 

tooltip.load( $(this).attr('href') +' #content'); 


























Register Now 
All fields are required 


Email Address @ 


Password @ lets you tap into all these 
great features and benefits: 


有 . Unlimited storage for your 
Secret Question © 人 es 


® Share and collaborate with your friends and 
family 


Secret Answer @ ® Receive real-time alerts with your friends 
status updates 


e Free toaster and cozy with account signup 
se Plus get a special gift when you joinl 
Register now | 























图 10-13 ”增强 体验 里 的 功能 和 好 处 工具 提示 
虽然 这 种 只 需要 JavaScript 的 方式 能 够 顺利 工作 ,但 是 请 求 整 张 网 页 会 带 来 显著 的 带宽 和 
CPU 开销 ， 而 我 们 真正 想 要 的 只 是 它 的 一 小 部 分 。 在 像 这 样 的 Ajax 案例 中 ， 只 要 有 可 能 ， 智 能 服 
务 需 方式 永远 应 该 是 追求 速度 和 效率 的 首选 。 
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10.5 “使 用 工具 提示 脚本 
我 们 创建 了 一 个 jQuery 插件 : jQuery.tooltip.js。 它 能 自动 化 创建 工具 提示 的 过 程 ， 而 且 能 





于 多 种 内 容 来 源 (title 、 锚 点 或 外 部 网 页 )。 这 个 脚本 和 范例 代码 可 以 在 www.filamentgroup. 
com/dwpe 上 下 载 。 





要 使 用 这 个 工具 提示 脚本 ， 只 需 用 某 个 jQuery 选择 器 找 到 网 页 里 的 一 个 或 多 个 元 素 ， 然 后 对 
它们 调用 tooltip 方 法 。 举 个 例子 ， 要 给 ID 为 #content 的 容器 里 某 个 段落 中 的 所 有 链接 赋予 工具 
提示 行为 ， 可 以 使 用 下 面 这 种 引用 方式 : 

$('#content p a').tooltip(); 

借助 这 一 方法 ， 脚 本 就 会 自动 生成 工具 提示 ， 然 后 用 适当 的 内 容 填充 它 。 

这 个 脚本 足够 智能 , 会 寻找 本 章 描述 的 三 种 可 能 内 容 来 源 (title 属 性、 本 地 href 锚 点 和 Ajax 
外 部 资源 )， 然 后 根据 下 面 的 逻辑 生成 工具 提示 。 

(1) 它 首 先 会 看 元 素 是 否 有 一 个 自 定义 的 HTML5 data-hrefpreview 属 性 ， 如 果 有 ， 就 用 Ajax 
从 该 属性 引用 的 外 部 内 容 来 源 里 抓 取 内 容 ， 并 放 入 工具 提示 。data-hrefpreview 属 性 是 这 个 插件 
特有 ， 在 该 脚本 的 上 下 文 环境 之 外 没有 任何 语义 价值 。 

(2) 如 果 找 不 到 data-hrefpreview 属 性 , 脚本 便 会 寻找 一 个 本 地 href 引 用 ( href="#privacy")， 
然后 用 此 锚 链 接 所 引用 ID 里 的 内 容 生 成 工具 提示 。 

(3) 如 果 这 些 来 源 都 找 不 到 ， 脚 本 会 使 用 title 属 性 来 生成 工具 提示 。 

这 套 逻 辑 的 顺序 被 设计 成 级 联 (cascade ) 的 形式 : data-hrefpreview 属 性 的 优先 级 高 于 href 
引用 ， 后 者 的 优先 级 又 高 于 title 属 性 。 举 个 例子 ， 如 果 某 个 链接 包括 了 全 部 三 种 内 容 来 源 ， 脚 
本 会 使 用 data-hrefpreview 属 性 引用 的 内 容 来 生成 工具 提示 : 

<a href="#privacy" data-hrefpreview="privacy.txt" title="We respect your privacy but won't tell you 

specifics">Privacy policy</a> 

这 个 脚本 能 实现 优雅 降级 : 如 果 某 个 元 素 调用 了 tooltip， 但 没有 任何 一 种 来 源 里 有 现成 的 
内 容 ， 那 么 脚本 就 不 给 这 个 元 素 显 示 工 具 提 示 ， 却 不 会 抛 出 错误 。 

通过 运用 渐进 增强 方法 ， 就 能 利用 原生 的 title 属 性 、 销 链接 和 HTML5 的 data 属 性 ， 将 网 页 
语义 标记 里 存储 的 内 容 转变 成 格式 和 样式 丰富 的 工具 提示 。 这 种 方法 给 了 我 们 实现 有 效用 户 体验 
所 需 的 设计 灵活 性 ， 却 无 须 牺 牲 基本 用 户 体验 的 质量 ， 也 不 会 给 可 用 性 带 来 负面 影响 。 








































































































树 形 控件 














树 形 控件 (tree control ) 是 在 Web 界 面 里 表现 层级 信息 的 最 流行 方式 之 一 : 它们 提供 了 一 种 
方法 , 能 在 紧凑 的 空间 里 展示 深度 般 套 的 多 级 内 容 ， 并 允许 用 户 有 选择 地 展开 和 折 符 节点， 从 而 
控制 要 显示 树 形 结 构 的 哪些 部 分 。 树 形 控件 经 常用 于 下 列 情况 。 

> 具有 深度 奶 套 结构 的 网 站 导航 组 件 ， 比 如 那些 产品 范围 很 广 、 层 级 很 深 的 电子 商务 网 站 。 

> 带 有 可 展开 / 折 羡 行 的 数据 表格 ， 比 如 项 目 管理 工具 “微软 项 目 管理 ”( Microsoft Project ) 

里 的 表格 。 

p> 带 有 分 层 文件 夹 的 Web 应 用 程序 里 的 导航 ， 比 如 电子 邮件 系统 或 者 RSS 阅 读 器 。 

树 形 控 件 本 质 上 是 一 系列 可 折 释 的 垦 套 容器 ， 里面 的 父 ( 或 分 支 ) 节点 能 够 展开 ,显示 出 一 
列子 节点 。 树 形 控件 的 设计 经 常会 采用 一 些 方式 来 提示 某 些 节点 存在 子 节点 ， 比 如 文件 夹 、 加 号 
(+) 图 标 ， 或 者 容 需 节点 标签 左 侧 的 箭头 图 标 。 

树 形 控件 的 关键 特征 是 它 内 置 类 似 应 用 程序 的 交互 标准 。 具 体 来 说 , 树 形 组 件 遵循 传统 的 桌 
面 应 用 程序 行为 ， 比 如 用 Tab 键 将 焦点 从 一 个 组 件 移 到 下 一 个 上 ， 以 及 用 方向 键 管理 单个 组 件 内 
部 的 移动 。( 这 种 行为 有 别 于 标准 的 Web 交 互 方式 , 后 者 用 Tab 键 在 各 个 可 获得 焦点 的 元 素 上 顺序 
导航 ， 将 方向 键 留 给 屏幕 滚动 使 用 。) 

随 着 越 来 越 复杂 的 应 用 程序 移植 到 网 上 , 我 们 能 看 到 Web 行 为 和 传统 桌面 行为 之 间 的 界线 变 
得 模糊 起 来 。 高 级 用 户 和 屏幕 阅读 器 用 户 习 惯用 键盘 在 树 形 控件 里 导航 和 展开 / 折 和 县 节点 ， 因 此 
任何 面向 增强 体验 的 自 定义 树 形 控件 都 应 该 包含 标准 的 树 形 控件 键盘 导航 惯例 。 

本 章 会 展示 如 何在 基本 体验 里 构建 一 个 使 用 语义 化 HTML 的 树 形 控件 , 然后 再 将 它 转变 成 一 
个 能 被 屏幕 阅读 器 访问 和 用 键盘 命令 控制 的 交互 式 树 形 控件 。 


















































注意 许多 网 站 使 用 的 多 级 导航 结构 遵循 传统 的 Web 行 为 ， 也 就 是 说 用 户 可 以 按 下 Tab 键 将 焦点 
从 一 个 链接 转移 到 另 一 个 上 。 要 创建 这 种 类 型 的 分 级 导航 ， 可 以 考虑 第 8 章 描 述 的 方式 ， 
用 一 系列 可 折 营 的 内 容 组 件 和 关联 它们 的 链接 列表 实现 。 


11.1 X 光 透视 
我 们 的 树 形 控件 目标 设计 是 一 个 基于 Web 的 文档 编辑 工具 里 的 导航 面板 , 内 含 用 户 的 文件 
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列表 ， 如 图 11-1 所 示 。 


凡 ; My Documents Filename 7 Size Modified 
肪 / Christine's Files Wl Christine's Files 122k December 12, 2009 at 6:38pm 
9 Resume.doc 图 Nathan's Stuff 67k December 12, 2009 at 6:38pm 
国 Cover-letter.doc 帮 Travel Ideas 3,234k December 12, 2009 at 6:38pm 
司 Gift Registry.doc 加 Wedding Plan 576K December 12, 2009 at 6:38pm 


态 Nathan's Stuff 
及! Travel Ideas 
顺 Wedding Plan 
图 My Movies 
My Music 
区 My Photos 














图 11-1 文档 编辑 界面 里 的 树 形 控件 目标 设计 ， 左 侧 是 导航 树 ， 右 侧 是 预览 面板 


树 形 组 件 是 这 个 双 面 板 界面 里 的 一 部 分 ， 控制 它 右 侧 关 联 细节 面板 里 的 数据 显示 。 鉴 于 X 光 
分 析 和 本 章 其 余部 分 的 需要 ， 我 们 会 重点 关注 树 形 组 件 。 
树 形 组 件 里 的 节点 分 为 两 类 : 一 种 是 组 织 内 容 的 容器 , 用 文件 夹 图 标 表示 ; 另 一 种 是 只 读 或 
可 编辑 的 文件 ， 用 页 面 图 标 表 示 。 为 了 提供 视觉 反馈 ,每 一 个 文件 夹 图 标 默认 都 是 关闭 的 ,在 节 
点 展开 时 则 会 变 成 打开 的 文件 夹 。 
在 增强 体验 里 , 用 户 可 以 通过 鼠标 点 击 或 键盘 命令 来 选择 树 形 控件 里 的 节点 , 这 很 像 某 个 桌 
面 搜索 窗口 。 
> 用 鼠标 点 击 树 结 构 里 的 某 个 文件 夹 会 展开 或 折 欠 它 ， 并 在 右 侧面 板 里 显示 文件 夹 的 内 容 
大 览 。 点 击 一 个 文件 则 会 打开 它 以 供 查 看 和 编辑 。 
> 使 用 上 下 方向 键 可 以 遍历 整个 树 形 结构 ， 并 用 各 个 节点 的 信息 更 新 预览 面板 。 举 个 例子 ， 
用 方向 键 将 焦点 移 到 某 个 文件 夹 节点 上 ， 会 将 预览 面板 更 新 为 该 文件 夹 的 内 容 。 
> 使 用 方向 键 聚焦 某 个 文件 夹 或 文件 后 ， 按 下 空格 键 或 回 车 键 会 展开 或 折 县 该 文件 淆 ,或 
者 打开 文件 。 按 下 右 方向 键 或 左 方向 键 也 能 分 别 展开 或 折 又 某 个 文件 夹 。 
要 让 键盘 命令 能 正确 工作 , 必须 为 增强 体验 编写 脚本 逻辑 , 让 树 形 组 件 里 的 当前 选中 节点 获 
得 焦点 ， 这 样 它 就 能 表现 得 更 像 一 个 桌面 应 用 程序 。 用 户 可 以 (使 用 Tab 键 ) 让 焦点 跳 到 树 形 组 
件 上 ， 然 后 用 方向 键 使 焦点 在 各 个 树 节 点 中 转移 。 
在 缺少 JavaScript 和 高 级 CSS 的 基本 体验 里 ,， 树 形 控件 表现 为 一 张 简单 的 链接 列表 ， 如 图 11-2 
所 示 。 
基本 体验 里 的 用 户 同 样 可 以 通过 鼠标 点 击 和 键盘 控制 来 浏览 整个 树 形 控件 ,不 过 做 法 稍 有 不 
同 : 由 于 没有 JavaScript， 基 本 树 形 控件 遵循 标准 的 浏览 器 行为 。 他 们 可 以 点 击 文件 或 文件 夹 的 链 
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接 来 打开 它 ， 或 者 用 Tab (或 Shift+Tab ) 键 来 遍历 列表 ， 然 后 按 下 回 车 键 或 空格 键 打开 链接 。 用 
户 打 开 某 个 文件 夹 链接 时 ,页 面 会 刷新 显示 该 文件 夹 内 容 的 快照 以 及 树 形 控件 的 一 小 部 分 ,以 便 
快速 导航 回 到 完整 列表 ， 如 图 11-3 所 示 。 








e My Documents 
© Christine's Files 
sm Resume.do 
sm Cover-letter.doc 
nm Gift Registry.doc 
© Nathan's Stuff 
@ Birthday Parties.doc 


sm Area Playgrounds.dec 
图 11-2 ”基本 体验 里 的 树 形 控件 
从 X 光 透视 法 看 ， 文 件 和 文件 夹 链接 两 者 的 标记 选择 都 很 明显 ， 那 就 是 锚 链 接 (a )， 其 中 每 


个 链接 都 指向 一 个 具体 的 文件 或 文件 夹 快照 页 。 要 创建 这 种 多 级 的 组 织 结构 , 使 用 一 张 无 序 列表 
是 一 个 良好 的 起 点 ， 因 为 它 可 以 包含 子 无 序列 表 来 表示 层级 里 的 附加 节点 。 





























® MY Documents 
oo Nathan's Stuff 


am Birthday Parties.doc 
mn Area Playgrounds.doc 








File name Size Modified 


Area Playgrounds.doc 24 KB January 19, 2010 at 10:07am 





Birthday Parties.doc 52 KB January 19, 2010 at 10:07am 























图 11-3 ”在 基本 体验 里 查看 树 形 控件 的 一 部 分 


因此 , 我 们 会 将 树 形 控件 的 基础 标记 编写 为 一 张 由 链接 组 成 的 无 序列 表 。 在 基本 体验 里 , 应 
用 尽 可 能 少 的 样式 ， 并 显示 链接 的 完整 列表 ， 不 带 有 任何 展开 / 折 关 行为。 这 个 页 面 对 键 盘 用 户 
和 屏幕 阅读 需 用 户 是 完全 可 用 和 可 访问 的 , 因为 他 们 只 需 像 对 待 标准 链接 列表 那样 与 树 形 控件 进 
行 交互 。 

在 增强 体验 里 , 我 们 则 会 给 列表 项 添加 样式 , 用 恰当 的 图 标 使 它们 看 上 去 像 个 树 节 点 ,并且 
用 JavaScript 默 认 隐 藏 除 顶 级 节点 之 外 的 所 有 节点 。 脚 本 还 会 应 用 逻辑 来 操纵 浏览 器 焦点 , 这 样 用 
方向 键 就 可 以 遍历 整个 树 形 控 件 ， 点 击 文件 夹 节点 则 会 展开 和 折 双 它们 ， 如 图 11-4 所 示 。 

我 们 会 指派 ARIA 属 性 来 帮助 增强 体验 里 的 屏幕 阅读 器 用 户 理解 这 是 一 个 树 形 控件 ， 它 的 行 
为 就 像 是 一 个 桌面 搜索 工具 , 而 不 仅仅 是 一 张 无 序 列表 里 的 一 堆 链 接 。 增强 脚本 还 会 在 用 户 与 树 
形 控件 交互 时 正确 指派 和 管理 ARIA 属 性 。 
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攻 MyDocuments 
肪 / Christine's Files 
El Resume.doc 
| vob nme 
| Gift Registry.doc 
东 Nathan's Stuff 
皮 Travel Ideas 
肠 Wedding Plan 
| Guests.doc 
引 Services.dcc 
瞳 My Movies 
功 My Music 
画 My Photos 




















图 11-4 增强 体验 里 的 导航 树 形 控件 





11.2 ”创建 树 形 控件 


首先 , 我 们 会 为 树 形 控件 编写 基础 标记 , 通过 使 用 一 组 嵌 套 的 无 序列 表 来 创建 恰当 的 文件 夹 
与 文件 层级 。 然 后 应 用 样式 增强 , 将 这 张 列表 转变 成 带 有 反馈 图 标的 树 形 控件 , 并 通过 JavaScript 
应 用 浏览 树 形 控件 所 需 的 鼠标 和 键盘 行为 。 


11.2.1 基础 标记 和 样式 


我 们 的 基础 标记 由 髓 套 的 无 序列 表 (ul ) 组 成 ,它们 包含 的 链接 指向 服务 器 里 存放 的 文件 和 
文件 夹 。 
最 外 侧 的 列表 带 有 files 这 个 id, 我 们 会 使 用 它 包 含 的 4 个 顶级 节点 ( 列表 项 ) 作为 文件 夹 来 
组 织 文件 。 在 每 个 列表 项 中 , 文件 夹 名 称 是 有 链接 的 , 这 能 让 基本 体验 里 的 用 户 看 到 一 张 只 列 出 
某 个 文件 夹 所 含 文件 的 网 页 : 
<ul id="files"> 
<li><a href="documents/">My Documents</a></1i> 
<li><a href="movies/">My Movies</a></1i> 
<li><a href="music/">My Music</a></1i> 


<li><a href="photos/">My Photos</a></1i> 
</ul> 


在 “我 的 文档 ”( My Documents ) 文件 夹 节 点 里 的 链接 后 面 ， 我 们 会 插入 另 一 张 无 序 列表 ， 
用 于 二 级 文件 来: 


<ul id="files"> 
<li><a href="documents/">My Documents</a> 
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<ul> 
<1i><a href="documents/Christines Files/">Christine's Files</a></li> 
<1i><a href="documents/Nathans_Stuff/">Nathan's Stuff</a></1i> 
<1i><a href="documents/Travel Ideas/">Travel Ideas</a></li> 
<li><a href="documents/Wedding Plan/">Wedding Plan</a></1i> 
</ul> 

</1i> 

<1i><a href="movies/">My Movies</a></1i> 

<li><a href="music/">My Music</a></1i> 

<1i><a href="photos/">My Photos</a></1i> 

</ul> 


用 同样 的 方法 填充 剩余 的 树 形 控件 层级 , 即 把 无 序列 表册 套 进 文件 夹 节 点 , 并 将 各 个 节点 链 
接 到 其 文件 夹 或 文件 路 径 上 。 

最 后 ， 在 基本 样式 表 里 应 用 全 局 字体 : 

body { font-family: "Segoe UI", Arial, sans-serif; } 

对 于 其 他 的 样式 而 言 ,我 们 会 让 各 种 设备 根据 它 默 认 的 浏览 避 样 式 表 来 演 染 这 些 链 接 舱 套 
的 列表 。 

在 目前 这 个 阶段 , 我 们 已 经 有 了 一 个 完美 可 用 的 基本 体验 导航 系统 , 它 利 用 了 默认 的 恋 套 列 
ee 








® MyDocuments 
© Christine's Files 


n Resumedog, 


sm Cover-letter.doc 


nm GiftRegistry.doc 
oO Nathan's Stuff 


mn Birthday Parties.doc 
sm Area Playgrounds.doc 
© Travel Ideas 
sm Potential Places.doc 
m Travel Funds.doc 
© Wedding Plan 
nm Guests.doc 
sm Services.doc 
@ My Movies 
5 TheBigLebowskim4v 
© Planet Earth.m4v 
® MyMusic 
© Bloc Party - Pioneers.mp3 
© Fleet Foxes - Blue Ridge Mountainsmp3 
e My Photos 
yellow-flowerjpg 
orange-flowerjpg 
red-flowerjpg 
white-flower.jpg 
bumblebees.jpg 


图 11-5 ”基本 体验 里 的 完整 导航 树 形 控件 
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11.2.2 ”增强 标记 和 样式 

我 们 会 添加 若干 属性 到 标记 里 ,为 每 类 节点 (文件 夹 或 文件 ) 和 它 的 状态 〈 打开 或 关闭 ， 鼠 
标 悬 停 或 带 有 焦点 ) 应 用 视觉 样式 ， 并 且 指 派 ARIA 属 性 来 帮助 向 屏幕 阅读 器 传达 树 形 控件 的 角 
色 和 状态 ， 以 及 它 的 各 个 组 件 。 

首先 ， 给 body 元 素 添加 一 个 值 为 application 的 ARIA role 属 性 ， 让 屏幕 阅读 器 识别 出 增强 体 
验 里 的 是 应 用 程序 控件 ， 并 让 我 们 能 够 利用 自 定 义 键盘 行为 : 

<body role="application"> 

我 们 会 给 最 外 侧 的 由 应 用 一 个 tree 类 。 为 了 保持 标记 的 简洁 ,默认 将 每 个 节点 链接 的 样式 设 
置 为 文件 ， 随 后 脚本 会 识别 出 哪些 节点 链接 了 文件 夹 〈 它 们 包含 子 列 表 )， 并 给 它们 的 链接 添加 
tree-parent 类 来 分 配 文 件 夹 图 标 : 


<ul id="files" class="tree"> 

































































<1i> 
<a class="tree-parent" href="documents/">My Documents</a> 
<ul> 
<li><a href="documents/Christines Files/" >Christine's Files</a> 
<ul> 


<li><a class="tree-parent" href="documents/Christines Files/Resume.doc">Resume.doc</a> 














我 们 想 让 屏幕 阅读 器 将 这 一 堆 列 表 和 链接 当做 一 个 树 形 组 件 , 而 非 一 张 普 通 的 链接 列表 ， 
此 添加 能 够 将 它 标识 为 树 形 组 件 的 ARIA 属 性 。( 要 查看 树 形 组 件 角 色 和 状态 的 完整 参考 文档 , 请 
访问 www.w3.org/TR/wai-aria/roles#tree。) 我 们 会 给 最 外 侧 的 无 序列 表 添 加 tree 这 个 role， 给 每 个 
般 套 列表 的 role 是 group， 每 个 列表 项 的 role 则 是 treeitenm: 


<ul id="files" class="tree" role="tree"> 
<l1i role="treeitem"> 
<a class="tree-parent" href="documents">My Documents</a> 
<ul role="group"> 
<]i role="treeitem"><a href="documents/Christines Files/"> Christine's Files</a> 
<ul role="group"> 

<li role="treeitem"><a class="tree-parent" href="documents 
/Christines Files/Resume.doc">Resume.doc</a></1i> 




















aria-expanded 属 性 标明 某 个 节点 处 于 展开 还 是 折 和 县 状态 。 默 认 情 况 下 ， 每 个 节点 都 是 折 蚕 
的 ， 所 以 指派 此 属性 时 会 用 false 值 。 我 们 还 会 (通过 类 ) 给 折 释 状态 添加 样式 。 网 页 载 入 时 ， 
每 一 个 文件 夹 链接 (tree-parent ) 都 会 带 有 tree-parent-collapsed 类 ， 而 各 个 通 套 列表 的 类 则 
是 tree-group-collapsed。 我 们 会 切换 这 些 类 的 开启 与 关闭 ， 以 此 提供 视觉 反馈 ， 并 隐藏 和 显示 
各 个 节点 。 

一 个 折 三 〈 隐藏 ) 节点 的 标记 看 上 去 如 下 所 示 : 


<li role="treeitem" aria-expanded="false"> 
<a class="tree-parent-collapsed" href="documents/" tabindex="-1">My Documents</a> 
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<ul role="group" class="tree-group-collapsed">...... </ul> 
</1i> 


节点 展开 时 ， 增 强 标 记 会 更 新 ARIA 属 性 和 类 的 值 : 
<]i role="treeitem" aria-expanded="true"> 
<a class="tree-parent" href="documents/" tabindex="0">My Documents</a> 
<ul role="group">...</ul> 
</1i> 
我 们 还 会 给 树 形 控件 里 的 各 个 节点 链接 添加 一 个 tabindex 属 性 。 默认 情况 下 , 一 个 网 页 里 的 
所 有 链接 都 可 以 通过 Tab 键 导航 获得 焦点 , 每 次 按 下 Tab 键 都 会 将 焦点 转移 到 下 一 个 链接 (或 者 其 
他 可 获得 焦点 的 元 素 ) 上 。 但 是 ,在 这 个 案例 里 , 我 们 想 将 树 形 控 件 看 做 单个 组 件 ， 而 不 是 一 张 
链接 列表 ， 所 以 会 给 各 个 节点 链接 指派 一 个 值 为 -1 的 tabindex， 将 其 移出 制 表 键 顺序 。 然 后 ,为 
了 确保 用 户 能 用 Tab 键 跳 入 跳出 树 形 组 件 ， 我 们 会 给 树 形 组 件 里 的 某 一 个 节点 链接 ( 默认 是 第 一 
个 ) 动态 指派 一 个 值 为 0 的 tabindex， 使 这 个 节点 链接 重新 加 入 制 表 键 顺序 。 随 着 用 户 用 方向 键 
浏览 树 形 组 件 ， 之 后 获得 焦点 的 节点 链接 将 得 到 0 这 个 tabindex 值 ， 而 之 前 获得 焦点 的 链接 则 恢 
复 为 -1, 从 而 再 次 防止 了 它 获得 Tab 键 焦点 。( 本 章 后 面 分 析 增 强 脚 本 时 会 再 次 讨论 这 种 称 为 游 动 
标签 序号 的 技巧 。) 
接 下 来 ,我 们 会 给 树 形 控件 添加 样式 ， 比 如 设置 字体 大 小 , 移 除 默认 的 列表 项 目 符号 , 设置 
外 边 距 和 内 边 距 , 以 及 给 树 形 控件 里 租 套 的 各 张 列表 设置 8 像素 的 左 侧 外 边 距 ,以 缩 进 各 个 级 别 : 
body { 
font-size: 62.5%; 


} 

.tree { 
overflow:auto; 
font-size:1.5em; 

} 

.tree, .tree ul,.tree 1i { 
list-style:none; 
margin:0; 
padding:0; 



































.tree ul { 
margin-left:8px; 








树 形 控件 里 的 所 有 节点 链接 都 分 配 了 文件 图 标的 背景 图 像 , 调 整 样式 后 留 出 了 足够 大 的 左 侧 
内 边 距 , 以 确保 链接 文字 不 会 遮盖 背景 图 像 。 增强 脚本 会 给 文件 夹 节 点 特别 指派 一 个 tree-parent 
类 ,分 配给 这 个 类 的 是 文件 夹 图 标的 背景 图 像 : 


.tree liaf{ 
Color:#555; 
padding:.1em 7px .1em 27px; 
display:block; 
text-decoration:none; 
border:1px dashed #fff; 
background:url(../images/icon-file.gif) 5px 50% no-repeat; 
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.tree 1i a.tree-parent { 
background:url(../images/icon-folder-open.gif) 5px 50% no-repeat; 


} 

某 个 文件 夹 链 接 关 闭 时 , 它 会 分 配 到 一 个 tree-parent-collapsed 类 , 这 个 类 会 将 背景 图 像 换 
成 关闭 的 文件 夹 图 标 ， 并 把 关联 的 子 列表 设 为 display:none 来 隐藏 它 ， 如 图 11-6 所 示 。 

.tree 1i a.tree-parent-collapsed { 


background:url(../images/icon-folder.gif) 5px 50% no-repeat; 


} 
.tree ul.tree-group-collapsed { 
display:none; 




















i My Documents 


车 My Documents 











图 11-6 折 麦 (顶部 ) 和 展开 (底部 ) 状态 的 文件 夹 节点 


我 们 还 想 加 入 良好 的 视觉 反馈 , 让 鼠标 和 键盘 用 户 了 解 焦点 在 哪个 节点 上 。 我 们 也 会 为 鼠标 
用 户 特别 提供 一 种 悬 停 状态 ， 标 明 他 们 的 光标 正 处 在 哪个 节点 上 。 

用 户 让 某 个 节点 获得 焦点 的 方式 可 以 是 点 击 它 ， 也 可 以 用 Tab 键 进入 树 形 控件 ， 然 后 用 方向 
键 来 遍历 列表 。 点 击 或 当前 选中 的 节点 会 获得 焦点 ,这样 就 为 系统 提供 了 所 需 的 必要 焦点 ， 让 它 
明白 该 如 何 执行 后 续 的 键盘 命令 ， 比 如 用 回 车 键 打开 它 。 因 此 , 带 有 和 焦点 的 样式 相 比 其 停 状 态 有 
着 更 深 的 轮廓 和 背景 色 。 

当 用 户 将 他 的 光标 悬 停 在 某 个 节点 上 时 , 我 们 还 提供 了 一 种 颜色 更 浅 的 悬 停 状 态 反馈 , 如 图 
11-7 所 示 。 














.tree 1i a:hover, 
.tree 1i a.tree-parent:hover, 
.tree 1i a:focus, 
.tree 1i a.tree-parent:focus, 


.tree 1i a.tree-item-active { 
color:#000; 
border:1px solid#eee; 
background-color:#fafafa; 
-moz-border-radius:4px; 
-webkit-border-radius:4px; 
border-radius:4px; 


.tree 1i a:focus, 

.tree 1i a.tree-parent:focus, 
.tree 1i a.tree-item-active { 
border:1px solid #e2f3fb; 
background-color:#f2fafd; 

} 
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蕊 My Documents 

攻 Christine's Files 
下 Resume.doc 
引 Cover-letter.doc 
司 Gift Registry.doc 

六 Nathan's Stuff 

六 Travel Ideas 

加 Wedding Plan 

















总 My Movies 
区 My Music 
记 My Photos 
图 11-7 “我 的 文档 ”文件 夹 节点 获得 了 焦点 ， 而 Cover-letter.doc 则 显示 了 及 停 状 态 





11.2.3” 树 形 控件 增强 脚本 


我 们 的 增强 JavaScript 会 给 基础 标记 添加 默认 的 ARIA role 和 class 属 性 ， 创 建 展 开 、 折 大 和 上 
下 穿行 树 形 控件 的 自 定 义 事件 , 然后 在 用 户 通过 鼠标 或 键盘 命令 与 树 形 控件 交互 时 触发 这 些 事件 。 
1. 指派 树 形 控件 增强 属性 
脚本 的 第 一 步 是 引用 即将 增强 成 树 形 控件 的 无 序列 表 ， 然 后 将 它 储存 在 一 个 tree 变 量 里 ; 
var tree = $('ul#files'); 0 
接 下 来 , 脚本 会 添加 适当 的 ARIA role 属 性 和 状态 类 ,并 在 标记 里 设置 各 个 节点 的 tabindex: 


// 给 树 形 控 件 添加 角色 和 类 
tree.attr({'role': 'tree'}).addClass('tree'); 

















// 将 第 一 个 节点 的 tabindex 设 置 为 0 
tree.find('a:eq(0)').attr('tabindex','0'); 





// 将 其 他 所 有 tabindex 设 置 设 为 -1 
tree.find('a:gt(0)').attr('tabindex','-1'); 


// 给 所 有 Ul 添加 group 角 色 和 tree-group-collapsed 类 
tree.find('ul').attr('role','group').addClass('tree-group-collapsed' ); 


// 为 所 有 1i 子 元 素 都 添加 treeitem 角 色 
tree.find('1i').attr('role','treeitem' ); 


// 找 到 树 形 控 件 里 的 “文件 夹 ” 项 ， 折 司 它 们 并 添加 tree-parent 类 
tree.find('li:has(ul)') 

.attr('aria-expanded', 'false') 

// 找 到 1i 的 直接 下 级 锚 链 接 

.find('>a') 

.addClass('tree-parent tree-parent-collapsed') 
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现 阶段 , 树 形 控 件 节 点 上 的 更 态 属性 都 已 经 设置 完成 了 , 接 下 来 可 以 给 脚本 添加 用 户 交互 行为 。 

2. 应 用 树 形 控件 行为 

我 们 会 创建 自 定义 的 jQuery 事件 来 展开 和 折 又 树 形 控 件 里 的 节点 , 并 将 它们 绑 定 到 树 形 控件 
本 身 ( 即 最 外 侧 的 ul )， 从 而 利用 JavaScript 原 生 的 事件 指派 行为 。 举 个 例子 ， 当 用 户 点 击 树 形 控 
件 上 的 任 一 位 置 时 , 脚本 会 分 析出 点 击 的 是 哪个 节点 , 然后 根据 它 当 前 的 状态 展开 或 折 钱 它 。 这 
种 绑 定 行为 的 方式 (只 对 一 个 容器 元 素 使 用 逻辑 ) 比 单独 将 事件 绑 定 到 各 个 树 节 点 更 有 效率 ， 执 
行 速度 更 快 。 如 果 需 要 ,还 可 以 动态 添加 节点 ， 因 为 每 一 个 新 节点 都 会 自动 继承 指派 给 树 形 控件 
的 行为 。 

首先 创建 expand 事 件 。 

// 将 自 定义 展开 事件 绑 定 到 树 由 


tree.bind('expand' ,function(event){ 
// 保 存 对 点 击 目标 链接 的 引用 
var target = $(event.target); 











// 移 除 折 司 的 类 ,更 换文 件 夹 图 标 
target.removeClass('tree-parent-collapsed' ); 


// 获 得 目标 同 级 元 素 的 UL 

target.next() 
// 用 display:none 隐 藏 UL 并 移 除 隐藏 的 类 
.hide().removeClass('tree-group-collapsed' ) 


// 向 下 滑动 展开 UL 

.Slidedown(150, function(){ 
// 找 到 上 一 级 的 LI， 设 置 它 的 展开 属性 
target.parent().attr('aria-expanded' ,'true'); 


// 移 除 来 自动 画 的 内 联 样式 
$(this) .removeAttr( "style' ); 
)); 
D); 


现在 ， 可 以 通过 触发 expand 事 件 展开 任意 一 个 文件 夹 节 点 : 
tree.find('a.tree-parent').trigger('expand' ); 
接 下 来 ,创建 一 个 collapse 事 件 ， 它 会 逆向 执行 expand 事 件 的 操作 : 


// 给 tree UL 弦 定 自 定义 的 折 直 事件 
tree.bind('collapse' ,function(event){ 
// 保 存 对 点 击 目标 链接 的 引用 
var target = $(event.target); 




















// 添 加 折 司 的 类 ， 更 换文 件 夹 图 标 
target.addClass('tree-parent-collapsed'); 





// 获 得 目标 同 级 元 素 的 UL 
target.next() 


// 向 上 滑动 折合 UL 
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.SlideUp(150, function(){ 
// 找 到 上 一 级 的 LI， 设 置 它 的 展开 属性 
target.parent() .attr('aria-expanded', 'false'); 


// 给 UL 添加 隐藏 的 类 ， 并 移 除 内 联 样 式 
$(this).addClass('tree-group-collapsed' ).removeAttr('style' ); 


3 
}); 


这 样 ， 可 以 通过 触发 collapse 事 件 来 折 释 某 个 打开 的 树 节 点 : 
tree.find('a.tree-parent').trigger('collapse'); 
有 了 这 些 可 供 支 配 的 事件 后 , 就 可 以 让 树 形 控件 对 鼠标 点 击 做 出 反应 ,展开 或 者 折 难 。 为 了 
确保 树 形 控件 展开 或 折 秋 正确 的 节点 ， 我 们 会 检查 被 点 er a de 
的 链接 ， 以 及 它 的 上 级 列表 项 是 否 有 一 个 设置 成 true 或 false 的 aria-expanded 属 性 : 


// 给 tree 绑 定点 击 事件 
tree.click(function(event){ 

// 保 存 对 目标 ( 即 被 点 击 的 元 素 ) 的 引用 
var target = $(event.target); 











// 检 查 目 标 是 否 是 一 个 树 节 点 
if( target.is('a.tree-parent') ){ 


// 检 查 树 节点 的 上 级 LI 是 否 是 折 梧 的 

if( target.parent().is('[aria-expanded=false]') ){ 
// 对 目标 调用 expand 函 数 
target .trigger('expand' ); 

} 


// 如 果 不 是 ， 上 一 级 必然 已 经 展开 了 
else{ 
// 折 司 树 节点 
target.trigger('collapse'); 





} 


// 将 焦点 移 至 目标 节点 
target[0].focus(); 


// 防 止 浏览 器 追踪 链接 
return false; 


} 
}); 


注意 ”用户 点 击 树 形 控件 里 茶 个 不 带 有 tree-parent 类 的 链接 时 ( 换 句 话说 ， 是 一 个 文件 节点 )， 
我 们 不 会 执行 任何 操作 。 相 反 ， 我 们 会 让 浏览 器 用 原生 方式 处 理 这 个 点 击 ， 打 开 选 中 的 
文件 。 


当 点 击 树 形 控件 ， 或 者 用 户 用 Tab 键 进入 树 形 控件 时 ， 茶 个 树 节 点 就 会 获得 焦点 。 如 果树 形 
控件 里 有 节点 获得 焦点 ， 那 么 就 会 用 一 些 方式 来 管理 聚焦 状态 。 
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> 用 户 在 各 个 树 节点 里 导航 并 移动 焦点 时 ， 我 们 会 使 用 游 动 标签 序号 技巧 ， 将 0 tabindex 
动态 移动 到 获得 焦点 的 项 上 。 
> 用 聚焦 状态 来 确定 用 户 按键 时 对 应 的 节点 ， 这 样 脚本 会 知道 该 展开 或 折 肢 哪个 节点 。 
> 控制 各 个 节点 获得 焦点 的 顺序 ， 这 样 用 户 就 可 以 用 上 下 方向 键 来 上 下 穿行 整个 树 形 控件 
结构 。 
首先 ,将 聚焦 节点 的 tabindex 设 置 为 0o， 这 样 就 可 以 用 Tab 键 访问 它 了 ( 树 形 组 件 则 通过 它 间 
接 实现 ): 


// 给 tree 绑 定 焦点 事件 
tree.focus(function(event){ 
// 如 果 存 在 之 前 获得 焦点 的 树 节点 ， 将 tabindex 设 为 -1 并 移 除 活动 的 类 
tree.find('[tabindex=0]') 
.attr('tabindex','-1') 
.removeClass('tree-item-active' ); 








// 指 派 0 tabindex 给 获得 焦点 的 项 ， 并 添加 活动 的 类 
$(event. target) 
.attr('tabindex','0'); 
.addClass('tree-item-active' ); 


注意 ”管理 制 表 键 焦点 有 一 种 替代 方法 ， 它 借助 名 为 aria-activedescendent 的 ARIA 属 性 ， 为 那 
些 理 解 ARIA 的 最 新 款 屏 幕 阅读 器 处 理 焦点 。 这 种 方法 的 缺点 是 它 只 适用 于 最 新 款 的 屏幕 
阅读 器 ， 而 游 动 标签 序号 技巧 适用 于 所 有 屏幕 阅读 器 ， 对 所 有 的 键盘 用 户 都 适用 。 


我 们 会 创建 一 个 keypress 事 件 〈 用 左右 方向 键 展开 和 折 释 某 个 获得 焦点 的 文件 夹 节点 )， 然 
后 将 它 绑 定 到 树 形 控件 的 UL 上 。 它 关联 的 函数 会 根据 事件 的 keyCode 属 性 〈37 是 左 方向 键 ，39 是 
右 方 向 键 ) 检查 按 下 的 是 哪个 键 。 当 按 下 左 方向 键 或 右 方向 键 时 ， 脚 本 会 对 获得 焦点 的 项 分 别 触 
发 expand 或 collapse 事 件 : 


// 给 tree UL 绑 定 keydown 事 件 处 理 程 序 
tree.keydown(function(event){ 

// 保 存 对 获得 焦点 项 的 引用 

var target = $(event.target); 














// 如 果 是 左 方向 键 且 列 表 是 展开 状态 
if(event.keyCode == 37 
&8& target.parent().is('[aria-expanded=true]')){ 
// 触 发 折 有 司 事 件 
target.trigger('collapse' ); 


// 返 回 false 以 防 浏览 器 滚动 
return false; 


} 
// 如 果 是 右 方 向 键 且 列 表 是 折 梧 状态 
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if(event.keyCode == 39 
&& target.parent().is('[aria-expanded=false]')){ 


// 触 发 展开 事件 
target.trigger('expand' ); 


// 返 回 false 以 防 浏览 器 滚动 
return false; 
} 
}); 
为 了 实现 上 下 方向 键 导 航 , 我 们 会 再 绑 定 两 个 自 定义 事件 (traverseUp 和 traverseDown ), 它 
们 会 使 焦点 在 树 形 控 件 里 上 下 移动 。 
当 用 户 在 树 形 控件 里 上 下 导航 时 , 我们 想 让 紧 挨 着 的 可 见 节 点 获得 焦点 , 无论 它 是 否 处 于 树 形 
组 件 里 的 相同 层级 都 是 如 此 。 举 个 例子 ， 如 果 当 前 焦点 是 在 “出 行 设想 ”( TravelIdeas ) 上 , 那么 用 
户 一 次 次 按 下 上 方向 键 时 ， 在 树 形 控件 里 位 于 它 上 方 的 每 一 行 都 会 依次 获得 焦点 ， 如 图 11-8 所 示 。 





车 My Documents 
总 Christine's Files 
车 Nathan's Stuff € 
国 Birthday Parties.doc 
目 Area Playgrounds.doc 
图 Travel Ideas 
罚 Wedding Plan 
车 My Movies 
目 The Big Lebowski.m4v 
国 Planet Earth.m4v 
局 My Music 
图 My Photos 














图 11-8 在 树 结构 里 向 上 穿行 的 示意 图 
用 于 向 上 穿行 的 逻辑 必须 处 理 几 种 情况 : 用 户 应 该 能 在 同 级 节点 中 穿行 , 返回 父 届 点 ， 以 及 
深入 树 形 结构 。 


// 给 tfee 绑 定 自 定义 的 traverseUp 事 件 
tree.bind('traverseUp' ,function(event){ 





// 保 存 对 事件 目标 〈 即 树 形 控件 里 获得 焦点 的 项 ) 的 引用 
var target = $(event.target); 





// 保 存 对 目标 上 级 1i 的 引用 
var targetli = target.parent(); 


// 检 查 目 标 列 表 项 之 前 是 否 存 在 同 级 项 

if( targetLi.prev().length ){ 
// 如 果 是 ,那么 检查 该 同 级 项 是 否 是 展开 的 
if( targetli.prev().is('[aria-expanded=true]') ){ 
// 深 入 进去 ， 将 焦点 移 至 它 最 后 的 可 见 子 项 上 


164 第 11 章 树 形 控件 





targetLi.prev() 
.find('"1i:visible:last a')[0].focus(); 


// 如 果 不 是 ， 那 么 之 前 的 同 级 项 是 折 登 的 
else{ 
// 将 焦点 赋予 之 前 的 同 级 项 自身 
targetLi.prev().find('a')[0].focus(); 
} 
} 
// 如 果 不 是 ， 那 么 不 存在 同 级 项 ， 该 项 在 自己 的 树 群 组 里 
else { 
// 向 上 移动 一 级 ， 涩 试 让 上 级 节点 获得 焦点 
targetLi.parents("1i:eq(0) ).find("a')[0].focus(); 


} 
}); 
有 了 上 面 这 段 代码 , 焦点 位 于 树 形 控件 内 时 ,可 以 在 用 户 按 下 上 方向 键 后 触发 traverseUp 事 件 : 


// 给 tree 由 绑 定 keydown 事 件 
tree.keydown(function(event){ 
// 如 果 是 上 方向 键 
if(event.keyCode == 38){ 
// 在 获得 焦点 的 项 上 和 触发 traveTseUp 
$(event .target) .trigger( "traverseUp ' ); 


// 返 回 false 以 防 浏览 器 滚动 
return false; 





} 

)); 
我 们 还 会 创建 一 个 traverseDown 事 件 ， 毫 不 奇怪 的 是 ， 它 基本 上 就 是 反 过 来 的 traverseUp。 
我 们 会 检查 获得 焦点 的 元 素 是 否 是 展开 的 ， 如 果 是 ,那么 焦点 应 该 跳 到 它 的 第 一 个 子 树 项 上 。 如 









































果 不 是 展开 的 ， 我 们 会 检查 它 之 后 是 否 有 同 级 项 可 以 获得 焦点 。 如 果 管 案 是 false， 那 么 当前 获 
得 焦点 的 项 就 是 它 树 群 组 中 的 最 后 一 个 。 我 们 会 尝试 寻找 一 个 拥有 后 续 同 级 项 的 上 级 列表 项 。 如 
果 能 找到 ， 就 让 它 获 得 焦点 。 

如 果 这 些 条 件 都 不 为 真 ， 原 因 是 用 户 已 经 穿行 到 了 树 形 控件 的 末尾 ， 那 么 很 简单 ， 
traverseDown 就 不 会 把 焦点 移出 当前 获得 了 焦点 的 项 。 

// 给 tree UL 弦 定 traverseDown 事 件 

tree.bind('traverseDown' ,function(event){ 


// 保 存 对 事件 目标 〈 即 树 形 控件 里 获得 焦点 的 项 ) 的 引用 
var target = $(event.target); 















































// 保 存 对 目标 上 级 1i 的 引用 
var targetLi = target.parent(); 


// 检 查 目 标 上 级 的 LI 是 否 是 展开 的 
if(targetLi.is('[aria-expanded=true]')){ 
// 它 是 展开 的 。 深 入 进去 ， 将 它 的 第 一 个 子 项 获得 修 点 
target.next().find("'a')[0].focus(); 
} 
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// 如 果 不 是 展开 的 ， 检 查 是 否 有 后 续 的 同 级 项 
else if(targetlLi.next().length) { 
// 让 它 后 续 的 同 级 项 获得 焦点 
targetLi.next().find('a' )[0].focus(); 


// 如 果 不 是 展开 的 ， 且 没有 后 续 同 级 项 ， 那 它 就 是 此 树 群 组 列表 的 最 后 一 项 
else { 
// 尝 试 找到 拥有 后 续 同 级 项 的 上 级 ]i， 将 焦点 移 到 那里 
Targetli.parents('1i').next().find("a')[0].focus(); 


} 
}); 
现在 ， 可 以 在 按 下 下 方向 键 时 触发 traverseDown 事 件 了 : 


// 给 tree 由 绑 定 keydown 事 件 
tree.keydown(function(event){ 
// 如 果 是 下 方向 键 
if(event.keyCode == 40){ 
// 在 获得 焦点 的 项 上 触发 traverseDown 事 件 
$(event. target).trigger('traverseDown' ); 





// 返 回 false 以 防 浏览 器 深 动 
return false; 
} 
]); 


增强 脚本 完成 后 , 这 个 树 形 控件 就 具备 了 完备 的 功能 , 兼容 ARIA, 并 且 可 以 通过 键盘 访问 。 
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本 书 所 附 的 演示 和 代码 ( 位 于 www.filamentgroup.com/dwpe ) 包含 一 个 脚本 : jQuery.tree.js。 
它 以 一 种 简单 易 用 的 方式 运用 了 本 章 概 述 的 这 些 原 则 。 

要 在 你 的 网 页 里 使 用 这 个 脚本 , 只 需 下 载 并 引用 树 形 控件 范例 页 里 列 出 的 那些 文件 , 然后 等 
DOM 就 绪 后 在 网 页 的 任意 列表 元 素 上 调用 tree 方 法 。 举 个 例子 ， 要 创建 一 个 基于 本 章 基 础 标记 
的 树 形 控件 ， 需 要 找到 一 个 id 为 files 的 山 元 素 ， 然 后 对 它 调用 tree 方 法 : 

$('#files').tree(); 

还 可 以 同时 在 奉 干 个 多 级 列表 上 调用 tree 方 法 ,把 它们 都 转变 成 树 形 控 件 。 举 个 例子 , 这 段 
代码 会 把 #ontent 容 融 里 的 所 有 凯 变 成 树 形 控件 : 

$('#content ul').tree(); 

这 个 插件 的 设计 很 简单 ， 只 包含 了 一 个 选项 ,用 于 将 某 个 节点 (或 多 个 节点 ) 默认 设置 成 打 
开 状 态 。 只 需 把 一 个 或 多 个 列表 项 选择 器 传递 给 expanded 选 项 即 可 。 举 个 例子 ， 如 果 想 默认 打开 
第 一 个 节点 : 


$('#files').tree({ 
expanded: "1i:first' 





















































了 
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或 者 展开 一 个 ID 为 wedding 的 列表 项 ， 


$('#files').tree({ 
expanded: '#wedding’' 


}); 
还 可 以 打开 多 个 节点 ,方法 是 给 若干 列表 项 指派 一 个 class ， 并 在 expanded 选 项 里 引用 这 个 
class: 


$('#files').tree({ 
expanded: ' .default-expand' 


})); 

树 形 控件 的 增强 版 组 件 可 以 用 简单 的 HTML 语 义 在 基础 标记 里 非常 清晰 地 描述 出 来 。 这 一 方 
法 的 优点 在 于 ， 增 强 体 验 可 以 在 坚实 的 基础 标记 之 上 ， 通 过 简单 生 加 额外 的 ARIA 属 性 、CSsS 样 
式 和 JavaScript 行 为 实现 。 它 是 教科 书 式 的 渐进 增强 范例 。 

tabindex 属 性 和 键盘 导航 都 是 重要 的 功能 ,让 所 有 用 户 都 能 高 效 使 用 树 形 控件 ,还 能 让 屏幕 
阅读 器 访问 。 编写 支持 这 些 行为 的 脚本 所 需 花 费 的 额外 时 间 必 不 可 少 , 因为 仅仅 依靠 鼠标 输入 无 
法 服务 于 所 有 人 , 甚至 还 会 让 一 些 用 户 感到 不 爽 ， 因 为 他 们 期 望 树 形 控 件 能 像 原 生 的 操作 系统 控 
件 那 样 工 作 。 
































NN 


HTML5 canvas 图 表 











以 图 形 化 方式 表现 复杂 数据 〈 比如 饼 图 、 折 线 图 、 面 积 图 或 柱状 图 ) 是 一 种 强 有 力 的 方法 ， 
它 不 仅 能 传达 信息 , 还 能 曾 明 那些 单 凭 仔细 观察 大 型 数字 表格 几乎 不 可 能 发 现 的 模式 与 趋势 。 我 
们 看 到 越 来 越 多 的 图 表 和 图 形 出 现在 网 上 ， 它 们 用 于 传递 关键 信息 ， 包 括 : 

> 统计 数字 和 百分数 的 比较 ， 例 如 投票 或 民意 测验 的 结 

> 跟踪 一 定时 间 内 的 简单 活动 或 性 能 信息 ， 例 如 访问 网 站 的 用 户 数量 ， 关 于 某 个 主题 的 新 

闻 报 道 次 数 或 者 股票 价格 ; 

> 在 显示 复杂 的 金融 或 科学 趋势 数据 时 直观 表现 移动 平均 数 、 最 小 值 和 最 大 值 之 间 的 相关 
性 ， 以 及 其 他 可 视 化 形式 的 增强 分 析 。 

呈现 可 视 化 图 表 和 图 形 数据 有 两 种 最 常见 的 方式 , 一 种 是 退 入 由 Web 服 务 器 生成 的 静态 图 表 
图 像 ， 另 一 种 则 需要 Flash、Java 或 Silverlight 等 插件 在 浏览 器 里 生成 图 表 。 可 惜 ,这 两 种 方式 都 不 
够 理想 . 静态 图 像 的 问题 在 于 它们 只 是 简单 的 图 片 ， 不 包含 任何 实际 的 数据 值 。( 对 那些 无 法 访 
间 可 视 性 内 容 的 用 户 来 说 ， 唯 一 能 为 他 们 总 结 “ 图 片 ” 中 数据 的 方式 是 生成 title 属 性 ， 但 这 种 
方式 很 难 掌控 ， 哪 怕 数 据 集 非 常 简单 也 是 如 此 。) 另外 ， 虽 然 基于 插件 的 图 表 解 决 方案 可 以 实现 
少 部 分 桌面 浏览 絮 的 访问 , 但 对 许多 移动 设备 、 旧 款 浏 览 器 或 者 出 于 安全 原因 限定 浏览 器 设置 的 
企业 环境 来 说 , 它们 可 能 不 支持 所 需 的 特定 插件 版 本 ,因此 要 么 通知 用 户 进 行 升级 , 要 么 在 图 表 
应 该 出 现 的 位 置 显示 一 片 空白 。 

2004 年 的 夏天 ，Safari 浏 览 器 的 开发 小 组 提出 了 另 一 种 方法 ， 他 们 引入 了 一 个 新 的 HTML 元 
素 ， 名 为 canvas ( 画布 )。canvas 元 素 提 供 了 一 套 原生 的 JavaScript 绘 图 API， 可 以 在 前 端 生成 视觉 
图 像 。2009 年 ，HTML5 规 范 将 canvas 纳 入 标准 元 素 ， 而 它 早已 在 新 版 的 火狐 、Safari、Chrome、 
Opera 浏 览 需 以 及 Webkit 驱 动 的 移动 设备 ( 比如 iPhone、Android 和 Palm Pre ) 上 得 到 了 广泛 支持 。 
再 加 上 相对 简单 的 Internet Explorer 变 通 方法 ( 这 一 章 会 讨论 )，canvas 能 安全 用 于 所 有 的 流行 现 
代 浏 览 器 。 

canvas 元 素 的 可 视 化 能 力 不 仅 在 图 表 和 图 形 上 得 到 了 体现 , 它 可 以 绘制 任何 类 型 的 图 像 , 其 
至 还 支持 动画 。 然 而 ， 需 要 重点 注意 的 是 , 它 自 身 并 不 能 算 做 是 一 种 完全 可 访问 的 解决 方案 。 像 
image 元 素 一 样 ， 它 是 一 种 纯 视 觉 性 的 格式 ， 对 盲人 等 残障 用 户 或 者 搜索 引擎 这 样 的 非 人 工 数 据 
解析 器 来 说 ， 它 几乎 没有 能 传达 自身 内 容 的 可 访问 式 方 法 。 

但 是 ，canvas 却 有 能 力 读 取 结 构 性 数据 ( 以 HTML table 的 形式 ) 并 对 其 进行 视觉 性 泻 染 ， 
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从 而 在 浏览 器 客户 端 上 创建 出 可 视 化 的 图 表 。 这 种 表现 内 容 的 新 方法 既 具 有 丰富 的 视觉 性 ,又 可 
供 所 有 用 户 访问 。 它 提供 了 数据 的 增强 化 视觉 再 现 ,同时 又 保证 了 信息 的 传达 , 不 会 把 任何 用 户 
拒 之 门 外 。 

本 章 会 演示 如 何 用 canvas 元 素 根据 HTML table 生 成 一 张 折线 图 ， 并 重点 强调 一 些 为 有 效 使 
用 canvas 而 需要 理解 的 关键 概念 。 随 后 ，12.4 节 会 相对 简单 地 讨论 一 些 更 高 级 的 逻辑 ， 它 们 是 创 
建 其 他 某 类 图 表 (包括 折线 图 、 饼 图 、 柱 状 图 、 堆 破 式 柱状 图 和 面积 图 ) 所 必需 的 。 








注意 ”下面 叙 述 的 标记 和 脚本 代表 并 益 明 了 用 canvas 元 素 正 确实 现 可 访问 图 表 用 到 的 关键 概念 
和 原则 ， 但 这 里 并 不 包括 实现 能 用 的 可 访问 图 表 所 需 的 完整 框架 。 要 使 用 一 套 可 行 的 解 
决 方案 ， 建 议 你 从 www.filamentgroup.com/dwpe 下 载 Visualize.js 持 件 ， 然 后 运用 下 面 的 指 
导 原 则 ,根据 你 的 喜好 对 它 进 行 定制 。 


12.1 X 光 透视 
假设 我 们 有 一 套 企业 “仪表 盘 ”"， 上 面 跟踪 记录 了 员工 的 销售 业绩 数据 。 我 们 希望 能 将 销售 


数据 显示 为 一 张 折线 图 ， 这 样 用 户 就 能 看 到 每 个 人 在 各 个 产品 类 别 方 面 的 销售 情况 ， 发 现 趋势 ， 
还 能 很 容易 地 比较 业绩 。 我 们 希望 这 张 数 据 图 表 看 上 去 如 图 12-1 所 示 。 
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图 12-1 销售 业绩 图 表 的 目标 设计 


用 X 光 透视 这 张 图 表 时 ,我 们 发 现 图 像 中 的 颜色 和 线条 粗细 并 不 是 用 户 需 要 看 到 的 重要 “ 干 
货 *"， 数 据 才 是 。 因 此 我 们 会 从 一 张 包含 所 有 销售 信息 的 简单 HTML 表 格 起 步 ， 而 不 是 在 网 页 里 
板 入 一 张 图 表 的 图 片 ， 如 图 12-2 所 示 。 
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2009 年 各 部 门 员工 工资 
food auto household furniture kitchen bath 


Mary 190 160 40 120 30 70 
Tom 3 40 30 45 5 49 
Brad 10 180 10 85 25 79 
Kate 40 80 90 25 15 119 











图 12-2 ”表格 形式 的 业绩 数据 


因为 这 张 表 格 是 用 结构 良好 的 HTML 编 写 的 , 所 以 它 的 数据 任何 人 都 可 以 访问 , 包括 移动 设 
备 、 屏 幕 阅读 器 和 搜索 引擎 。 

相 比 本 书 里 的 其 他 组 件 ,创建 可 访问 的 图 表 需 要 多 花 几 步 ,但 是 它 仍然 遵循 相同 的 基本 模式 : 
首先 创建 基础 标记 ,以 完全 可 访问 的 格式 包括 用 户 需要 的 所 有 相关 信息 ; 然后 在 增强 体验 里 应 用 
高 级 CSS 和 JavaScript， 将 基本 数据 转变 成 增强 图 像 。 

为 了 创建 基于 表格 的 图 表 ， 我 们 会 解析 HTML table， 提 取出 所 有 数据 值 ， 并 在 浏览 器 里 用 
canvas 元 素 根据 这 些 数据 创建 图 表 。 我 们 会 一 一 介绍 用 表格 生成 折线 图 的 相关 步骤 ,然后 在 本 章 
末尾 讨论 如 何 使 用 jQuery Visualize 插 件 。 它 是 一 个 功能 完备 的 图 表 制 作 脚本 ， 能 在 这 本 书 的 网 站 
上 找到 。 


12.2 ”基础 标记 
在 制作 图 表 之 前 ， 需 要 一 个 数据 来 源 ， 所 以 我 们 一 开始 会 在 基础 标记 里 构建 一 张 HTML 


这 张 表格 包含 了 4 位 员工 (Mary、Tom、Brad 和 Kate ) 的 零售 数据 和 他 们 在 各 类 百货 商店 ( 食 
品 商店 、 汽 车 商店 、 家 居 商 店 、 家 具 商 店 、 厨 房 用 品 商店 和 浴室 用 品 商店 ) 中 的 近期 销售 量 。 

表格 可 以 拥有 许多 子 元 素 和 属性 , 它们 会 给 视觉 性 和 非 视 觉 性 用 户 两 者 都 增加 语义 价值 。 我 
们 会 利用 所 有 能 编码 进 基 本 版 网 页 的 结构 和 意义 。 完 成 标记 后 , 销售 数据 的 表格 看 起 来 如 下 所 示 : 


<table> 
<caption>2009 Employee Sales by Department</caption> 
<thead> 
<tr> 
<td></td> 
<th scope="col">food</th> 
<th scope="col">auto</th> 
<th scope="col">household</th> 
<th scope="col">furniture</th> 
<th scope="col">kitchen</th> 
<th scope="col">bath</th> 
</tr> 
</thead> 
<tbody> 
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<tr> 
<th scope="row">Mary</th> 
<td>190</td> 
<td>160</td> 
<td>40</td> 
<td>120</td> 
<td>30</td> 
<td>70</td> 

</tr> 

<tr> 
<th scope="row">Tom</th> 
<td>3</td> 
<td>40</td> 
<td>30</td> 
<td>45</td> 
<td>35</td> 
<td>49</td> 

</tr> 

<tr> 
<th scope="row">Brad</th> 
<td>10</td> 
<td>180</td> 
<td>10</td> 
<td>85</td> 
<td>25</td> 
<td>79</td> 

</tr> 

<tr> 
<th scope="row">Kate</th> 
<td>40</td> 
<td>80</td> 
<td>90</td> 
<td>25</td> 
<td>15</td> 
<td>119</td> 

</tr> 

</tbody> 
</table> 


这 张 表 格 的 标记 由 3 个 主要 部 分 组 成 : 


caption ( 它 是 表格 特有 的 一 种 元 素 ， 提供 了 对 后 续 表 


格 数 据 的 简短 介绍 )、thead( 表格 项 部 水 平方 向 的 表格 头 行 )， 以 及 tbody ( 包含 表格 内 容 主 体 的 
那些 行 )。 我 们 用 th 元 素 标 记 每 列 和 每 行 的 第 一 项 ， 通 过 应 用 值 为 col 或 Yow 的 scope 属 性 ， 说 明 这 








些 内 容 分 别 用 做 相应 列 或 行 的 标题 。scope 
版 ), 但是， 在 范围 更 广 的 屏幕 阅读 器 上 ， 








属性 能 够 被 新 款 的 屏幕 阅读 器 识别 (比如 JAWS 的 最 新 
这 一 属性 的 支持 程度 是 不 一 致 的 。 尽 管 如 此 ， 我 们 仍 





然 觉 得 把 它 放 进 标记 里 对 任何 阅读 标记 的 人 都 有 帮助 ， 包 括 屏 幕 阅读 器 用 户 和 开发 者 等 。 


注意 如 果 是 更 复杂 的 表格 ， 比 如 表格 头 和 单元 格 模 跨 多 行 或 多 列 ， 请 使 用 headers 属 性 来 关联 
表格 头 和 它们 的 数据 单元 格 。 第 3 章 介 绍 了 如 何 使 用 这 个 属性 。 另 外 要 注意 ,本章 描 述 的 
脚本 需要 修改 才能 适用 于 如 此 复杂 的 表格 结构 。 
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虽然 这 张 表格 的 语义 很 丰富 ,但 是 在 大 多 数 浏 览 絮 里 ,表格 元 素 的 默认 外 观 还 很 不 尽 如 人 意 ， 
如 图 12-3 所 示 。 在 Firefox 3 等 浏览 器 里 ， 表 格 不 带 边框 ， 单 元 格 内 边 距 也 不 大 ， 这 证 阅读 数据 变 
得 困难 。 





2009 年 各 部 门 员工 工资 
food auto household furniture kitchen bath 


Mary 190 160 40 120 30 70 
Tom3 40 30 45 35 49 
Brad 10 180 10 85 25 79 
Kate 40 80 90 25 15 119 


图 12-3 不 带 样 式 的 基础 表格 标记 
为 了 改善 基本 表格 的 可 读 性 , 我 们 会 把 一 些 “ 安 全 ”样式 添加 到 基本 样式 表 里 。 绝 大 多 数 老 
款 和 移动 浏览 器 都 支持 这 些 样式 ， 而 且 会 在 不 支持 它们 的 浏览 咒 里 安全 地 降级 。 首 先 ,， 我 们 会 合 
并 表格 的 边框 , 在 单元 格 之 间 加 一 条 线 ， 并 给 单元 格 应 用 浅 灰色 的 边框 和 一 些 内 边 距 ,让 表格 行 
更 容易 浏览 。caption 元 素 同 样 也 是 表格 的 一 个 视觉 标题 ， 所 以 我 们 会 加 粗 文字 并 添加 底部 外 边 
距 使 它 变 得 突出 。 我 们 还 会 添加 一 堆 font-family， 让 表格 的 字体 与 网 站 其 他 部 分 看 上 去 一 致 ， 
但 不 会 定义 字体 大 小 ， 而 是 让 各 种 设备 使 用 它 自 己 的 默认 值 : 


body { 
font-family: "Segoe UI", Arial, sans-serif; 


} 


table { 
border-collapse: collapse; 


























caption { 
margin: 0 0 .5em; font-weight: bold; 


} 


td, th { 
text-align: center; 
border: 1px solid #ddd; 
padding:2px 5px; 





在 给 基本 CSS 添 加 这 些 细微 样式 调整 之 后 ， 数 据 表格 现在 更 易于 阅读 了 ， 如 图 12-4 所 示 。 


2009 年 各 部 门 员工 工资 


food auto household furniture kitchen bath 


Mary 190 160 40 120 30 70 
Tom 3 40 30 45 35 49 
Brad 10 180 10 85 25 79 
Kate 40 80 90 25 15 119 





图 12-4 添加 “安全 ”样式 后 的 基础 表格 标记 











172 第 12 章 HTMLS5 canvas 图 表 





12.3 创建 可 访问 的 图 表 


用 基础 标记 里 的 数据 表格 创建 图 表 分 为 以 下 几 步 : 解析 基本 标记 里 的 数据 以 供 可 视 化 使 用 ; 
初始 化 canvas 元 素 并 编写 指令 ,绘制 展现 其 内 部 数据 值 、 图 例 ( legend ) 和 标签 的 图 像 ， 如 果 将 
数据 表格 留 在 页 面 上 效果 更 好 ， 就 添加 增强 样式 来 改进 它 的 显示 方式 ; 最 后 , 添加 一 些 指 令 和 快 
捷 方 式 来 支持 可 访问 性 。 


12.3.1 解析 表格 数据 


建立 和 美化 HTML 表 格 之 后 ,我 们 会 用 JavaScript 采 集 它 的 信息 并 组 织 成 可 以 用 来 生成 图 表 的 
格式 ， 此 图 表 会 按 部 门 显示 每 个 人 的 销售 量 对 比 情 况 。 

首先 ， 创 建 一 个 名 为 tableData 的 JavaScript 对 象 ， 用 来 完整 保存 所 有 信息 ; 

var tableData = {}; 

这 个 tableData 变 量 可 以 作为 附加 变量 的 一 个 命名 空间 ， 扮 演 一 个 干净 容器 的 角色 ， 存 放 从 
表格 解析 出 的 数据 。 举 个 例子 ， 可 以 声明 tableData.myNewProperty 给 这 个 对 象 添加 一 个 属性 ， 然 
后 任意 设置 这 个 属性 的 值 。 要 生成 折线 图 ， 先 从 HTML 表 格 里 收集 必要 的 信息 ， 将 它 存储 在 
tableData 对 象 里 。 

把 表格 元 素 存 入 一 个 名 为 table 的 变量 以 方便 引用 : 

var table = $('table'); 

1.X 轴 标签 

tableData 对 象 的 第 一 个 属性 会 命名 为 xLabels。 顾 名 思 义 ， 它 会 包含 那些 沿 着 底部 X 轴 的 标 
签 值 ， 它 们 的 作用 是 帮助 识别 图 表 上 方 的 那些 数据 点 。 

就 这 张 图 表 而 言 ， 我 们 会 让 “部 门 ”( department ) 数据 从 左 到 右 显 示 ， 使 X 轴 标签 映射 到 表 
格 项 部 thead 里 的 那些 内 容 ， 如 图 12-5 所 示 。 
















































































2009 年 各 部 门 员 工 工资 


THEAD food auto household furniture | kitchen | bath | xLabels = ['food', 'auto', 
T "household', 'furniture', 
Mary 190 160 40 120 30 70 'kitchen', 'bath'] 
Tom 3 40 30 45 35 49 
Brad 10 180 10 85 25 79 
Kate 40 80 90 25 15 119 


图 12-5 针 轴 标签 从 THEAD 中 的 表 头 读 取 





我 们 会 将 xLabels 定 义 为 一 个 空 数组 ， 然 后 使 用 jQuery 的 each 方 法 轮流 访问 thead 里 的 各 个 th 
元 素 ， 把 它们 的 文本 值 插入 xLabels 数 组 : 


// 定 义 xLabels 数 组 
tableData.xLabels = []; 
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// 轮 流 访问 表格 thead 里 的 各 个 th 元 素 

table.find('thead th').each(function(){ 
// 把 每 一 个 th 里 的 文本 值 杭 入 XLabels 数 组 
xLabels.push( $(this).html() ); 


了 


2. 图 例 标 签 
表格 左 列 (员工 姓名 ) 里 的 数据 会 被 用 作 图 表 里 的 图 例 ， 如 图 12-6 所 示 。 
2009 年 各 部 门 员 工 工 资 


food auto household furniture kitchen bath 





Mary 190 160 40 120 30 70 
Tom 3 40 30 45 35 49 
TBODY TH — 
Brad 10 180 10 85 25 79 
Kate 40 80 90 25 15 119 


Legend = ['Mary','Tom','Brad','Kate'] 


图 12-6 图表 的 图 例 标 签 从 表格 TBODY 里 的 TH 中 获得 
要 捕捉 这 些 值 ， 我 们 会 给 tableData 对 象 添加 男 一 个 名 为 legend 的 属性 : 


// 定 义 legend 数 组 
tableData.legend = []; 





// 轮 流 访问 表格 tbody 里 的 各 个 th 元 素 

table.find('tbody th').each(function(){ 
// 把 每 一 个 th 里 的 文本 值 质 入 legend 数 组 
legend.push( $(this).html() ); 


了 





可 以 看 到 ， 生 成 图 例 数组 的 过 程 与 创建 xLabels 数 组 所 用 的 循环 方式 非常 相似 ， 但 它 引 用 的 
是 tbody 里 的 th 元 素 ， 而 不 是 thead 里 的 。 

3. Y 轴 标签 

接 下 来 是 图 表 的 数字 型 7Z 轴 标签 , 可 以 使 用 下 面 的 程序 逻辑 计算 出 表格 主体 数据 集 里 的 最 高 
值 和 最 低 值 ， 效 果 如 图 12-7 所 示 。 


// 定 义 初始 值 为 0 的 topValue 和 bottomValue 属 性 
tableData.topValue, tableData.bottomValue = 0; 














// 轮 流 访问 tbody 里 的 各 个 td 元 素 
table.find('tbody td').each(function(){ 


// 定 义 thisValue 变 量 ， 存放 转换 成 数字 的 td 文本 
var thisValue = parseFloat( $(this).text() ); 


// 检 查 thisValue 是 否 比 当前 的 topValue 更 高 

if( thisValue > tableData.topValue ) { 
//thisValue 成 为 新 的 topValue 
tableData.topValue = thisValue; 
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} 

// 检 查 thisValue 是 否 比 最 低 值 更 低 

if( thisValue < tableData.bottomValue ){ 
//thisValue 成 为 新 的 bottomValue 
tableData.bottomValue = thisValue; 

} 

}); 


2009 年 各 部 门 员 工 工资 


food auto household furniture kitchen bath 


Mary 1 1901 160 40 120 30 70 topvalue = 190 
Tom 40 30 45 35 ，49 bottomvalue = 3 
Brad 10 180 10 85 25 79 
Kate 40 80 90 25 15 | 119 


图 12-7 通过 确定 最 高 和 最 低 数 据 值 计算 出 了 轴 
现在 已 经 给 tableData 对 象 定义 了 两 个 新 值 ，topValue 和 bottomValue， 分 别 用 于 最 高 和 最 低 
数据 点 。 我 们 会 用 它们 计算 出 了 轴 的 标签 。 在 这 个 案例 里 ， 柱 状 图 或 折线 图 所 用 的 7 轴 需要 禾 盖 
从 3 (bottomValue ) 到 190 ( topValue ) 的 范围 ， 因 此 脚本 会 将 此 轴 设 为 0~190， 并 在 图 表 高 度 能 
够 容纳 的 范围 加 入 适量 的 刻度 ， 如 图 12-8 所 示 。 
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图 12-8 ”折线 图 上 显示 的 7 轴 
为 了 集 齐 生 成 Y 轴 标签 所 需要 的 信息 ， 我 们 需要 确定 几 项 数据 : 
> 图 表 的 高 度 ; 
PY 了 轴 上 各 个 标签 之 间 理 想 的 像素 距离 ; 
> 数据 集 里 最 低 值 和 最 高 值 之 间 的 范围 。 
我 们 会 根据 表格 的 宽度 和 高 度 设置 图 表 的 尺寸 : 


// 用 表格 元 素 的 高 度 定 义 ChartHeight 变 量 
var chartHeight = table.height(); 





// 顺 便 也 定义 一 下 chartNidth， 以 备 将 来 使 用 
var chartWidth = table.width(); 
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然后 , 计算 出 显示 在 7 轴 上 的 标签 数量 。 我 们 会 用 chartHeight 除 以 一 个 代表 标签 间 像 素 距离 
的 数 。 在 这 个 案例 里 , 我 们 会 指定 30 像 素 作为 理想 的 标签 间距 ， 因 为 考虑 到 字体 大 小 ， 这 个 数字 
能 够 创建 出 充足 的 距离 。 把 结果 四 舍 五 人 后 ， 就 获得 了 显示 在 7 和 上 的 标签 数量 : 


// 根 据 chartHeight 定 义 numLabels 交 量 
var numLabels = Math.round(chartHeight / 30); 


了 解 要 显示 的 标签 数量 之 后 , 我 们 会 找 出 数据 集 的 整体 范围 , 然后 在 这 个 范围 内 迭代 生成 各 
个 标签 的 值 。 定 义 变量 totalRange 作 为 最 高 和 最 低 值 之 间 的 差 值 。 虽 然 在 我 们 的 样本 数据 里 
totalRange 与 topValue 相 等 ,但 是 这 一 步 计算 仍然 是 必需 的 ， 因 为 它 确保 了 那些 包含 负 值 的 数据 
集 能 正确 体现 在 整体 范围 里 : 


// 定 义 totalRange 作 为 最 高 和 最 低 值 之 间 的 差距 
var totalRange = tableData.topValue - tableData.bottomValue; 


我 们 已 经 有 了 足够 的 数据 来 生成 7 轴 标 签 , 现在 定义 一 个 新 的 yLabels 数 组 并 填 人 标签 值 。 标 
签 值 遍布 最 低 值 到 最 高 值 的 区 间 ， 数 量 则 是 我 们 能 放 进 去 的 最 大 值 ( 考虑 到 图 表 的 高 度 ): 


// 定 义 yLabels 数 组 
tableData.yLabels = []; 



























































// 找 出 递增 的 量 ， 如 果 不 是 整数 则 增加 到 整数 
var yIncrementAmt = Math.ceil(totalRange / numLabels); 


// 定 义 一 个 递增 变量 ， 从 最 低 值 起 步 
var currentValue = tableData.bottomValue; 


// 如 果 currentValue 仍 然 小 于 最 高 值 减 去 递增 量 

while( currentValue < tableData.topValue - yIncrementAmt){ 
// 把 currentValue 添 加 到 yLabels 数 组 中 
tableData.yLabels.push(currentValue); 





// 使 CUTTentValue 增 加 一 个 递增 量 
currentValue += yIncrementAmt; 


a 添加 最 高 值 作为 最 后 的 标签 

tableData.yLabels.push(tableData.topValue); 

4. 数据 组 

接 下 来 创建 的 属性 是 dataGroups， 这 个 二 维 数组 聚合 表格 里 各 个 单元 格 ( td ) 的 值 ， 然 后 根 
据 我 们 选择 的 图 表 数 据 显示 方向 ， 把 这 些 数 据 按 行 或 列 组 织 起 来 。 这 里 会 按照 从 左 到 右 的 顺序 ， 
把 这 些 值 根据 包含 它们 的 tr 行进 行 分 组 ， 如 图 12-9 所 示 。 

需要 解析 表格 数据 才能 实现 图 12-9 显 示 的 数组 。 为 此 ， 定 义 dataGroups 数 组 ， 然 后 遍历 表格 
里 的 每 一 行 ， 并 把 每 一 行 的 文本 值 数 组 作为 dataGroups 里 的 一 项 : 


// 定 义 dataGroups 数 组 
tableData.dataGroups = []; 











// 遍 历 tbody 里 的 各 个 tr 
table.find('tbody tr').each(function(i){ 


176 第 12 章 HTMLS5 canvas 图 表 





// 将 dataGroups 的 下 一 项 定义 为 一 个 新 数组 
tableData.dataGroups[i] = []; 


// 人 遍历 这 个 tr 里 的 各 个 td 
$(this).find('td').each(function(){ 

// 将 td 里 的 文本 转换 成 数字 

var tdNumberValue = parseFloat( $(this).text() ); 


// 将 值 添加 到 dataGroups[i] 数 组 
tableData.dataGroups[i].push( tdNumberValue ); 


}); 
]); 
2009 年 各 部 门 员工 工资 

food auto household furniture kitchen bath tableData.dataGroups = [ 
Mary 190 160 40 120— ==30mnlesyOml [190,160,40,120,30,70]， 
Tom 3 | 40 30 45- — = [3,40,30,45,35,49], 
Brad 10 180 10 85 [— 25==lsR9al [10,180,10,85,25,79]， 
Kate 40 80 90 25 | 二 人 二 SEE 二 第 人 本 [40,80,90,25,15,119] ]; 





图 12-9 ”创建 数据 组 的 方法 是 解析 每 一 行 的 数据 值 ， 并 将 其 放 和 一 个 数组 


我 们 现在 有 了 一 个 由 程序 生成 的 数组 来 匹配 表格 里 的 内 容 行 , 接 下 来 就 是 有 趣 的 部 分 了 : 绘 
制图 表 。 
































12.3.2 ”用 canvas 实 现 数据 可 视 化 
我 们 有 了 必要 的 数据 ， 可 以 开始 绘制 图 表 了 。 第 一 步 是 创建 canvas 元 素 , 并 用 之 前 ( 基于 表 
格 尺寸 ) 创建 的 chartHeight 和 chartwidth 变 量 来 设置 它 的 width 和 height 属 性 : 


// 创 建 一 个 新 的 Canvas 元 素 
var canvas = $('<canvas />'); 




















// 设 置 宽度 和 高 度 属性 
canvas.attr({ 
height: chartHeight, 
width: chartWidth 


}); 


注意 我 们 用 HTML 的 width 和 height 属 性 (而 不 是 CSS ) 设置 canvas 的 大 小 ， 这 一 点 很 重要 。 虽 
然 可 以 使 用 CSS 给 canvas 元 素 添加 样式 ， 但 是 canvas 的 绘图 API 只 关联 该 元 素 的 width 和 
height 属 性 。 











创建 出 一 个 空白 的 canvas 之 后 , 会 把 它 添加 到 网 页 中 一 个 包装 器 div 里 。 这 个 div 包 含 了 和 图 
表 有 关 的 许多 元 素 ， 包 括 标题 、 说 明和 轴 的 标签 。 我 们 会 创建 这 个 包装 器 div， 设 置 它 的 尺寸 以 
匹配 canvas， 再 把 canvas 插 入 它 里 面 ， 然 后 把 它 添加 到 网 页 中 ， 紧 跟 在 表格 后 面 : 
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A 


// 创 建 canvas 容 器 div 

var canvasContain = $('<div class="chart"></div>') 
// 设 置 它 的 C5S 宽 度 和 高 度 属 性 
.Css({width: chartWidth, height: chartHeight}) 


// 给 它 添加 canvas 元 素 
.append(canvas) 
// 将 它 插入 到 表格 元 素 后 面 
.insertAfter(table); 
1. 让 IE 跟 上 时 代 
我 们 差不多 已 经 准备 好 绘制 图 表 了 。 在 此 之 前 ， 需 要 说 明 一 个 情况 : Internet Explorer ( 直至 
IE 8 ) 不 支持 canvas 元 素 和 它 的 绘图 API。 为 了 让 图 表 能 在 Internet Explorer 上 工作 , 我 们 需要 一 种 
变通 方法 。 幸 好 ,谷歌 公司 开发 了 一 个 名 为 exCanvas 的 库 ， 它 将 canvas 的 命令 翻译 成 VML， 后 者 
是 一 种 只 有 Internet Explorer 才 支持 的 私有 绘图 语言 。 要 使 用 exCanvas， 需 要 在 网 页 的 head 里 引用 
excanvas.js 脚 本 ， 而 且 必 须 放 在 其 他 任何 使 用 canvas 命 令 的 脚本 之 前 。 可 以 用 一 个 条 件 注释 来 引 
用 这 个 脚本 ， 以 确保 只 有 卫 能 看 到 和 下 载 它 : 
<!--[if IE]><script src="excanvas.js"></script><![endif]--> 
挂 接 上 exCanvas 后 ,我们 只 需要 在 下 里 调用 6G_vmlCanvasManager.initElement 方 法 就 能 初始 化 
canvas。 我 们 会 把 它 放 进 if 语 句 里 ， 检 查 exCanvas 是 否 已 定义 ， 这 样 它 就 只 会 应 用 到 合适 的 浏览 
名 (Internet Explorer ) 上 : 
// 通 过 检测 exXcanvas 对 象 判断 浏览 器 是 否 是 IE 
if( typeof(G vmlCanvasManager) != 'undefined' ){ 
// 如 果 是 ， 就 初始 化 Canvas， 这 样 就 能 在 IE 里 绘图 了 


G_vmlCanvasManager.initElement( canvas[0] ); 


} 

现在 ， 就 可 以 在 canvas 上 绘制 图 表 了 。 

2. 绘制 图 表 线 条 

我 们 会 使 用 canvas 的 2D 绘 图 API 来 绘制 图 表 ， 所 以 第 一 步 是 调用 getContext 方 法 ， 将 画布 的 
上 下 文 环境 定义 为 2D。 我 们 会 用 ctx 这 个 变量 来 保存 对 此 上 下 文 环境 的 引用 ， 它 用 来 给 画布 发 送 
绘图 指令 . 


// 定 义 Ctx 变 量 作 为 canvas 2D 上 下 文 环境 对 象 
var ctx = canvas[0].getContext('2d'); 


我 们 希望 图 表 上 的 各 线条 之 间 有 所 区 别 , 因此 创建 一 个 包含 十 六 进 制 颜色 值 的 数组 。 为 简单 
起 见 ， 我 们 称 它 为 colors : 
var colors = ['#beie2d', '#666699', '#92d5ea', '#ee8310']; 





























注意 ”在 挑选 用 于 图 表 的 颜色 时 ， 请 注意 选择 能 被 约 占 5% 的 色盲 用 户 (大 多 数 是 男性 ) 辨别 的 
颜色 。 要 避免 选择 具有 相同 明度 ( 即 颜 色 深度 等 级 ) 的 红色 、 绿 色 和 黄色 ， 并 应 该 在 色 
育 模 拟 器 上 测试 你 所 选 的 颜色 ， 比 如 Color Oracle ( http://colororacle.cartography.ch )。 
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开始 绘制 线条 : 默认 情况 下 ,canvas 绘 


但 是 ， 


< 
变量 : 











ctx.translate( 0, chartHeight ); 

现在 ,绘图 的 起 始点 是 图 表 的 左下 角 。 

之 前 我 们 给 tableData 对 象 创建 了 一 个 dataGroups 属 性 , 它 包含 了 来 自 表格 的 数据 , 按 行 进行 
分 组 。 现 在 ， 使 用 一 个 for 循 环 来 遍历 dataGroups 数 组 并 绘制 图 表 线 条 。 作 为 循环 运行 前 的 准备 ， 
我 们 会 计算 绘制 画布 上 各 个 点 时 应 该 使 用 的 坐标 增 量 , 用 画布 的 宽度 除 以 每 条 线 上 的 点 数 , 并 把 
商 保存 在 一 个 名 为 xIncrementAmt 的 变量 里 。 我 们 还 会 用 lineWidth 属 性 定义 图 表 线条 的 宽度 为 2 


像素 : 











// 定 义 xXIncrementAmt 来 表示 折线 图 里 的 点 距 


var xIncrementAmt= chartWidth / (tableData.xLabels.length -1); 


// 设 置 画布 上 下 文 环境 的 lineWidth 为 2 px 


ctx.lineWidth = 2; 























图 API 的 坐标 方向 是 从 左上 角 开 始 往 右 下 角形 成 正 值 。 














图 表 里 的 坐标 是 从 左下 角 开 始 ， 然 后 向 右 侧 和 上 方 扩 展 ， 因 此 需要 重 置 默认 的 起 始点 。 
我 们 会 用 canvas 的 translate 方 法 将 7 轴 的 值 重 置 为 我 们 的 画 





布 高 度 ， 用 的 仍然 是 chartHeight 





可 





定义 完 这 些 变量 后 , 就 准备 好 循环 遍历 这 个 数据 数组 并 实际 绘制 线条 了 。 首先 移动 绘图 工具 
到 当前 和 群 组 里 的 第 一 个 数据 点 ,方法 是 使 用 ctx.moveTo(0, -points[i])， 然 后 使 用 迭代 变量 i 来 匹 
配 线条 颜色 和 颜色 数组 中 的 项 ， 该 颜色 数组 与 该 群 组 对 应 。 接 下 来 ， 用 beginPath 方 法 把 绘制 工 
具 放 置 在 画布 上 , 然后 循环 遍历 群 组 里 的 每 个 点 ， 从 上 一 个 点 到 当前 点 之 间 绘 制 一 条 线 , 再 使 用 
xIncrementAmt 变 量 的 数值 增加 左 侧 偏 移 量 。 

循环 结束 后 , 连接 各 点 的 线条 就 已 经 绘制 完成 了 。 我 们 会 给 线条 应 用 颜色 和 宽度 , 然后 关闭 
路 径 结束 绘制 ( 否则 它 会 在 后 面 的 循环 里 连接 到 下 一 条 线 )， 如 图 12-10 所 示 。 


// 在 dataGroups 数 组 上 开始 for...in 循 环 
for(var i in dataGroups){ 











// 定 义 points 为 当前 的 dataGroups 子 数组 
var points = dataGroups[i]; 





// 把 画笔 移动 到 此 数组 的 第 一 个 数据 点 上 
// 用 负数 的 Y 值 从 左下 角 向 上 移动 


ctx.moveTo(0, -points[i]); 


// 设 置 线条 颜色 为 颜色 数组 里 的 对 应 颜色 
ctx.strokeStyle = colors[i]; 


// 按 下 画笔 开始 绘 
ctx.beginpath(); 


// 定 义 currentXvalue 和 存放 增加 值 
var currentXvalue = 0; 


// 开 始 用 for 循 环 遍历 数据 点 数组 以 绘制 各 个 点 
for(var j in points){ 
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// 从 当前 位 置 画 一 条 到 下 一 个 点 的 直线 
ctx.lineTo(currentXvalue, -points[j]); 


// 给 currentXvalue 加 上 增加 量 
currentXvalue += xIncrementAmt; 
} 
// 给 线条 描 边 ， 使 其 可 见 
ctx.stroke(); 
// 完 成 这 条 线段 ， 抬 起 画笔 
ctx.closepath(); 























图 12-10 在 Canvas 图 表 里 ， 每 个 数据 集 都 以 唯一 的 颜色 绘制 


3. 添加 坐标 轴线 条 和 标签 

困难 的 部 分 已 完成 : 我 们 的 图 表 夯 出 来 了 ! 

接 下 来 ， 给 坐标 轴 添 加 文字 标签 ， 让 用 户 能 够 理解 图 表 线 条 的 含义 。 之 前 我 们 为 tableData 
对 和 象 创建 了 xLabels 和 yLabels 两 个 属性 ， 现 在 用 它们 在 图 表 坐 标 轴 沿线 设置 标签 。 

从 技术 角度 看 ， 可 以 用 多 种 方式 创建 这 些 标签 。 也 许 最 清爽 的 方式 是 用 canvas 原 生 的 文本 方 
法 把 文字 标签 直接 写 到 画布 上 。 但 不 遗憾 ，canvas 文 本 方法 并 不 像 canvas 绘 图 方法 那样 得 到 广泛 
的 支持 ， 所 以 canvas 文 本 不 符合 我 们 的 需求 。 

相 比 将 标签 写 和 画布 , 另 一 种 可 行 的 方法 是 添加 所 需 文字 的 HTML 标 记 , 然后 用 CSS 将 其 定 
位 到 图 表 div 之 内 。 我 们 会 为 每 一 组 标签 各 自 创 建 一 张 无 序列 表 (ul )， 然 后 循环 遍历 各 个 属性 
来 给 标签 添加 列表 项 。 为 了 给 这 些 标签 添加 样式 和 定位 ， 我 们 会 混合 使 用 外 部 和 内 联 的 CSS 。 
和 所 有 的 CSS 布 局 一 样 ， 我 们 会 尽 可 能 把 CSS 都 放 在 外 部 样式 表 里 ， 但 是 对 这 些 用 JavaScript 动 
态 定位 的 标签 来 说 ， 更 合理 的 方式 是 内 联 设置 坐标 ， 而 不 是 试图 去 猜测 它们 可 能 的 位 置 ， 然 后 
应 用 各 种 类 。 我 们 会 绝对 定位 这 些 标签 ， 并 根据 坐标 轴 的 不 同 ， 只 内 联 设 置 各 个 列表 项 的 left 
或 bottom 值 。 

我 们 会 用 JavaScript 生 成 这 张 列 表 ， 循环 遍历 xLabels 数 组 并 用 程序 设置 各 个 列表 项 的 left 和 
width 内 联 样 式 ， 让 它们 沿 X 轴 平均 分 布 。 生 成 的 X 轴 标签 HTML 如 下 所 示 ， 效 果 如 图 12-11 所 示 。 


<ul class="labels-x"> 
<li style="left: Opx; width: 83px;">food</1i> 
<li style="left: 83px; width: 83px;">auto</1i> 

















</ul> 
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food auto household furniture kitchen bath 


图 12-11 添加 轴 标 签 后 的 图 表 





7 了 轴 标 签 略 微 复杂 一 些 ， 因 为 水 平 线 需要 在 各 个 标签 增 量 上 横 穿 图 表 , 方便 联系 线条 和 它们 


的 数据 点 。 我 们 会 为 ? 轴 标 签 使 用 下 面 的 标记 : 


<ul class="labels-y"> 
<li style="bottom: 199px;"> 
<span class="line"></span> 
<span class="label">190</span> 
</1i> 
<li style="bottom: 166px;"> 
<span class="line"></span> 
<span class="label">145</span> 
</1i> 


ul> 

可 以 看 到 ,了 轴 标 记 里 的 每 个 列表 项 都 包含 了 两 个 span: 一 个 用 于 图 表 线 ， 另 一 个 用 于 文字 
标签 。 这 一 次 , 我 们 使 用 bottom 而 不 是 left 来 定位 这 些 列表 项 , 这 样 项 目 就 会 从 下 往 上 垂直 堆 受 。 

剩 下 的 就 是 给 标签 和 线条 添加 样式 ， 可 以 用 下 面 这 些 样 式 进行 处 理 : 


.Chart { position: relative; } 
.labels-x, 
.labels-y { 
position: absolute; 
left: 0; 
top: 0; 
list-style: none; 
margin: 0; 
padding: 0; 
width: 100%; 
height: 100%; 





.labels-x 1i, 

.labels-y li { 
position: absolute; 
bottom: 0; 
color: #555; 

} 

.labels-y li span.line { 
position: absolute; 
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border: 0 solid #ccc; 


.labels-x 1i { 
margin-top: 5px; 


.labels-y li { 
width: 100%; 


.labels-y li span.label { 
right: 100%; 
position: absolute; 
margin-right: 5px; 


.labels-y 1i span.line { 
border-top-width: 1px; 
width: 100%; 





我 们 把 各 个 标签 ul 的 尺寸 设置 为 图 表 容 器 div 自 身 width 和 height 的 100%, 这 样 就 能 很 容易 地 
使 用 top、right、bottom 和 left 属 性 将 列表 项 定位 在 图 表 各 处 。 然 后， 可 以 绝对 定位 这 些 列表 项 
(以 及 标签 ， 在 7 轴 上 ), 根据 坐标 轴 的 不 同 给 它们 设置 100% 的 top 或 right 值 。 

我 们 还 会 把 7 轴 列 表 项 ( 以 及 它们 带 有 1line 类 的 子 span ) 的 宽度 设 为 100%， 这样 就 可 以 给 这 
些 span 添 加 一 个 顶部 边框 来 制作 线条 ， 对 应 7 轴 上 的 各 个 标签 ， 如 图 12-12 所 示 。 























household 








图 12-12 ” 带 有 X/Y 轴 标签 和 水 平 线 的 图 表 

4. 添加 颜色 图 例 

我 们 的 折线 图 还 差 一 点 就 能 完成 : 需要 一 个 图 例 来 将 每 条 线 关联 到 一 名 员工 身上 。 

这 个 图 例 也 会 是 一 张 简单 的 无 序列 表 , 里 面 的 每 一 项 都 包含 一 个 span 作 为 员工 姓名 边 上 的 颜 
色 图 标 。 我 们 会 遍历 legend 数 组 ， 用 下 面 的 脚本 生成 一 张 列 表 ( 注意 ， 我 们 还 引用 了 colors 数 组 
里 序号 相同 的 项 ， 获 得 每 位 员工 的 对 应 颜色 ): 

// 创 建 图 例 UL 

var legendList = $('<ul class="legend"></ul>'); 








// 人 遍历 legend 里 的 项 
for(var i in tableData.legend){ 
// 用 legend 项 里 的 文本 创建 列表 项 
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$('<l1i>'+ tableData.legend[i] +'</1i>') 
// 前 面 加 上 颜色 值 方 块 的 span 
.prepend('<span style="background: “+ 
wtableData.colors[i] +'" />') 


// 把 列表 项 附加 到 图 例 列表 中 
.appendTo(legendList); 





// 把 图 例 凡 附加 到 图 表 容 器 div 中 
legendList.appendTo(canvasContain); 





提示 。 上面 的 脚本 被 设计 成 遍历 和 生成 整个 无 序列 表 后 才 开 始 向 网 页 插入 内 容 。 虽 然 可 以 先 创 
建 无 序列 表 并 将 它 插入 网 页 ， 然后 再 填充 它 , 但 是 这 么 做 可 能 会 引发 浏览 器 的 性 能 问题 ， 
对 非常 大 的 表格 来 说 尤为 如 此 。 首 先生 成 完整 的 列表 能 确保 脚本 快速 执行 。 


现在 , 用 CSS 给 图 例 添 加 样式 。 我 们 会 使 它 保持 简单 ， 将 它 以 横向 列表 的 格式 放置 在 图 表 下 
方 。 只 需 用 到 下 面 的 CSS 代 码 : 


ul.legend { 
list-style: none; 
position: absolute; 
border: 1px solid #000; 
padding: 10px; 
left: 100%; 
margin-left: 10px; 


ul.legend li span { 
width: 6px; 
height: 6px; 
float: left; 
margin: 3px; 


带 着 样式 的 图 例 现在 位 于 图 表 下 方 ， 如 图 12-13 所 示 。 
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图 12-13 ”图 表 里 的 图 例 用 颜色 编码 的 方块 来 标明 各 条 线 
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5. 添加 图 表 标 题 


可 视 化 表格 数据 的 最 后 一 步 是 复制 来 自 表 格 的 caption 元 素 并 给 它 添加 样式 ， 用 作 图 表 的 
标题 : 


// 创 建 图 表 标题 div 

$('<div class="chart-title">'+ table.find('caption').html() +'</div>') 
// 把 它 附加 到 图 表 包 装 器 div 前 部 
.prependTo(canvasContain); 


然后 给 标题 添加 样式 ， 使 它 和 图 表 看 起 来 协调 : 


.chart-title { 
font-size: 14px; 
font-weight: bold; 
position: absolute; 
bottom: 100%; 
margin-bottom: 10px; 
width: 100%; 


. 
应 用 上 所 有 样式 后 ， 我 们 的 最 终 canvas 图 表 如 图 12-14 所 示 。 
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12-14 ”完成 后 的 图 表 包 括 一 个 基于 表格 caption 的 标题 


12.3.3 ”添加 表格 增强 样式 


尽管 我 们 有 了 一 张 漂亮 的 新 图 表 , 但 在 某 些 情况 下 , 可 能 有 必要 保留 网 页 上 的 原始 表格 ， 比 
如 额外 提供 易于 浏览 的 数字 式 数 据 。 在 这 个 案例 里 , 我 们 会 给 增强 样式 表 添 加 一 些 规则 来 改进 它 
的 显示 方式 。 

我 们 会 把 为 基础 标记 创建 的 样式 作为 基础 ， 修 改 caption 元 素 的 样式 使 其 变 大 变 粗 ， 并 给 表 
格 头 添加 一 层 非常 浅 的 灰色 背景 色 ， 将 它们 与 表格 数据 单元 格 区 分 开 ， 如 图 12-15 所 示 。 








184 第 12 章 ， HTMLS canvas 图 表 





”2009 年 各 部 门 员 工 工资 


food auto household furniture kitchen bath 
Mary 190 160 40 120 30 70 
Tom 3 40 30 45 35 49 
Brad 10 180 10 85 25 79 
Kate 40 80 90 25 15 119 
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图 12-15 ”添加 了 样式 的 数据 表格 和 最 终 的 折线 图 ， 两 者 堆 受 在 一 起 ， 同 时 可 见 





12.3.4 ”保持 数据 的 可 访问 性 


本 章 前 面 提 到 , 我 们 的 网 页 是 从 一 张 可 访问 的 数据 表格 起 步 。 既 然 没 有 做 过 任何 事 危害 到 用 
户 访问 表格 的 能 力 , 我 们 的 数据 就 仍然 是 可 访问 的 , 只 不 过 多 了 一 张 canvas 图 表 作 为 补充 。 但 是 ， 
鉴于 网 页 上 同时 显示 着 表格 和 图 表 , 我 们 想 将 两 者 之 一 隐藏 起 来 , 也 许 是 为 了 给 小 屏幕 上 的 布局 
释放 一 些 空间 ， 或 者 只 是 为 了 减少 页 面 元 余 。 

1. 将 表格 隐藏 起 来 

隐藏 数据 表格 的 常用 方法 包括 使 用 CSS 的 display: none; 属 性 ， 或 是 用 JavaScript 把 它 从 网 页 
里 完全 删除 。 很 遗憾 〈 也 许 还 很 明显 )， 这 两 种 技巧 不 仅 将 内 容 从 视觉 上 隐藏 起 来 ， 对 屏幕 阅读 
恬 用 户 同样 也 隐藏 了 ， 这 样 实际 上 就 背离 了 采用 表格 生成 方式 的 目的 ， 也 就 是 可 访问 性 。 

幸好 , 还 有 其 他 一 些 方法 能 在 不 影响 可 访问 性 的 情况 下 隐藏 内 容 。 我 们 建议 确定 这 张 表格 的 
绝对 位 置 ， 把 它 远 远 地 放 到 网 页 左边 沿 之 外 。 这 样 做 能 成 功 使 它 对 视力 正常 的 用 户 隐 藏 , 但 它 仍 
然 存 在 于 文档 流 中 ， 能 够 被 屏幕 阅读 器 访问 : 


table { position: absolute; left: -99999px; } 
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2. 对 屏幕 阅读 器 隐藏 图表 

我 们 生成 的 这 张 图 表 完全 是 为 了 改善 视觉 外 观 , 所 以 它 对 那些 视力 受 损 的 用 户 价值 很 低 。 
此 ， 对 屏幕 阅读 器 用 户 隐 藏 这 一 部 分 内 容 会 有 帮助 。 

W3C 的 WAI-ARIA 规 范 草案 提供 了 role="img" 这 个 属性 ， 它 非常 适合 这 一 种 用 途 ， 因 为 它 告 
知 屏 幕 阅读 器 这 个 元 素 扮演 的 是 一 张 图 像 的 角色 。 

就 像 图 像 有 alt 属 性 一 样 ，img 角 色 可 以 和 aria-1abel 属 性 搭配 起 来 ， 用 纯 文 本 描述 图 像 。 我 
们 会 把 这 些 属性 添加 到 图 表 包 装 器 div 上 ， 后 者 包括 了 canvas 和 其 他 列表 : 

<div class= chart role="img”aria-label=" 这 张 折线 图 所 表现 的 数据 来 自 : 2009 年 员工 销售 量 表 ( 按 部 门 分 

a and the extra lists go here --> 

</div> 


这 些 属性 用 jQuery 很 容易 添加 : 


// 在 我 们 的 包装 器 div 上 设置 Tole 和 aria-label 属 性 
canvasContain.attr({ 
'role': 'img', 
'aria-label': 'Chart representing data from: ' + table.find('caption').text() 


]); 

许多 屏幕 阅读 器 用 户 仍 然 在 使 用 不 能 很 好 地 支持 〈 或 者 完全 不 支持 ) ARIA 的 屏幕 阅读 器 版 
本 , 所 以 我 们 会 提供 备份 文字 ,提醒 这 些 用 户 此 元 素 包含 的 内 容 纯粹 是 为 了 视觉 用 途 , 并 提供 一 
个 链接 让 用 户 跳 过 该 元 素 。 这 段 消 息 会 放 在 一 个 角色 为 img 的 div 容 需 里 ， 这 样 使 用 新 版 屏幕 阅读 
器 的 用 户 就 会 知道 这 个 div 纯 粹 是 视觉 性 的 ， 他 们 不 会 看 到 里 面包 含 的 消息 。 

首先 ， 向 图 表 div 搬 入 一 个 段落 元 素 ， 它 包含 一 段 描述 内 容 视觉 性 本 质 的 消息 : 

$('<p class="chart-access-message"><strong> 注 意 : 《</strong> 下 面 这 块 内 容 包 含 的 HTML 用 于 在 视觉 上 呈现 网 


页 其 他 位 置 上 的 一 张 数据 表格 。<a href="#end0fChart"> 跳 过 此 图 表 </a></p>') 
.prependTo(canvasContain); 


可 以 看 到 ， 我 们 添加 了 一 个 “ 跳 过 ”连接 ， 它 引用 了 一 个 id 属性 为 endofChart 的 元 素 。 为 了 
让 这 个 跳 过 链接 能 起 作用 , 我 们 会 创建 对 应 的 元 素 , 将 它 附 加 到 几 表 容 需 末尾 。 我 们 还 会 把 这 个 
元 素 的 tabindex 属 性 设 为 -1, 这 就 让 它 能 够 通过 程序 获得 焦点 , 防止 Internet Explorer 里 的 一 个 bug 
破坏 跳跃 时 的 页 面 滚动 。 

$('<div id="endOofChart" tabindex="-1"/>').appendTo(canvasContain); 

现在 , 我 们 会 对 视力 正常 的 用 户 隐藏 这 段 消 息 , 因为 它 只 和 那些 使 用 屏幕 阅读 器 浏览 的 用 户 
有 关 : 

.Chart-access-message { 


position: absolute; 
left: -99999px; 

























































































快速 添加 这 些 代码 到 图 表 样式 和 脚本 中 后 ,屏幕 阅读 器 用 户 现在 会 将 图 表 识 别 为 一 张 图 像 ， 
或 者 会 收 到 该 内 容 是 视觉 专用 内 容 的 警告 ， 以 及 一 种 跳 过 它 的 方法 。 
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12.4 让 canvas 图 表 更 进一步 : visualize.js 插件 


我 们 把 本 章 讨论 的 高 级 概念 扩展 成 一 个 名 为 visualize 的 jQuery 插件 。 这 个 插件 的 功能 比 折线 
图 范例 更 为 全 面 ， 它 塞 括 了 额外 的 图 表 类 型 ， 比 如 柱状 图 、 面 积 图 和 饼 图 ， 还 包含 了 两 套 视 觉 主 
题 样式 〈 除 了 之 前 显示 的 浅 白色 背景 样式 ， 还 有 一 种 即将 在 下 方 图 表 里 展示 的 深 色 图 表 主 题 )。 
此 外 ， 它 还 提供 了 一 套 清 晰 的 API， 可 以 用 丰富 的 配置 选项 〈 比如 宽度 、 高 度 、 颜 色 和 解析 方向 
等 ) 生成 图 表 。 可 以 用 它 生成 本 章 里 描述 的 这 张 图 表 ， 方法 很 简单 ， 只 需 链 接 jQuery 库 和 这 个 揪 
件 脚 本 ， 然 后 在 网 页 里 的 任何 表格 上 调用 visualize 方 法 即 可 。 

要 在 某 张 表格 上 调用 visualize.js 插 件 ,请 把 图 表 的 type 设 置 为 line、area、bar 或 pie。 如 果 你 
没有 指定 一 种 图 表 类 型 ， 那 么 默认 会 创建 出 一 张 折线 图 ， 如 图 12-16 所 示 。 


$('table').visualize({type: 'line'}); 
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图 12-16 ”通过 visualize.js 插 件 创建 的 折线 图 








要 创建 一 张 每 条 线 下 方 都 带 有 半 透 明 填 充 区 域 的 面积 图 ， 只 需 为 图 表 type 传 人 area 即 可 ,如 
图 12-17 所 示 。 

$('table').visualize({type: 'area'}); 

柱状 图 的 图 表 type 则 是 par， 如 图 12-18 所 示 。 

$('table').visualize({type: 'bar'}); 

也 许 和 你 预计 的 一 样 ， 可 通过 指定 pie 这 个 图 表 type 用 一 张 饼 图 显示 数据 。 用 visualize.js 创 建 
的 饼 图 会 自动 限制 自身 的 尺寸 以 适应 和 矩形 的 canvas。 这 样 的 尺寸 很 适合 柱状 图 和 折线 图 , 但 是 对 
圆 形 的 饼 图 来 说 就 有 点 让 人 感觉 拘束 。 可 通过 传递 一 个 可 选 的 height 参 数 给 它 一 点 额外 的 空间 ， 
这 样 canvas 就 能 变 得 更 高 一 些 ， 饼 图 也 会 随 之 放大 ， 如 图 12-19 所 示 。 
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图 12-17 通过 visualize.js 插 件 创建 的 面积 图 
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图 12-18 ”通过 visualize.js 插 件 创建 的 柱状 图 2 


$('table').visualize({type: 'pie', height: '300px'}); 
visualize 方 法 会 返回 一 个 新 的 图 表 容 器 div， 并 自动 将 它 插 人 到 网 页 中 ， 紧 跟 在 表格 之 后 。 
要 为 一 张 表格 显示 出 多 个 可 视 化 对 象 ， 只 需 多 次 调用 visualize 方 法 : 


$(function(){ 
$('table').visualize({type: 'pie', height: '300px'}); 
$('table').visualize({type: 'bar'}); 
$('table').visualize({type: 'area'}); 
$('table').visualize({type: 'line'}); 

}); 


























注意 这 一 节 引 用 的 visualize.js 插 件 可 以 在 www.filamentgroup.com/dwpe 上 下 载 。 要 了 解 关 于 如 
何 使 用 visualize.js 插 件 的 更 多 信息 ， 请 阅读 我 们 的 文章 : http://t.cn/zRITOLj。 
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图 12-19 ”通过 visualize.js 插 件 创建 的 饼 图 











canvas 元 素 提供 了 一 套 丰 富 的 API, 它们 具备 健壮 的 绘图 能 力 , 广泛 兼容 各 种 浏览 器 和 设备 ， 
并 且 还 具备 支持 使 用 页 面 内 数据 这 一 优点 ( 它 让 可 访问 性 得 以 最 大 化 ), 在 项 目 里 使 用 canvas 时 ， 





只 需 注 意 少数 几 件 事 即 可 。 
> 从 结构 良好 的 语义 数据 表格 起 步 ， 编 码 进 去 的 意义 越 多 越 好 。 
> 在 引用 canvas 的 同时 别 忘 了 引用 exCanvas 库 ， 以 确保 Intermet Explorer 用 户 能 
> 用 HTML 的 width 和 Height 属 性 设置 canvas 的 大 小 ， 不 能 靠 CSS 来 设置 尺寸 。 


























到 你 的 图 表 。 


上 如 果 图 表 的 坐标 需要 从 底部 开始 ( 像 我 们 的 图 表 一 样 )， 而 不 是 从 canvas 原 生 的 左上 角 开 


台 ， 请 使 用 translate 方 法 设置 上 下 文 环境 。 





> 如 果 你 选择 对 视力 正常 用 户 隐 藏 数据 表格 ， 那 就 应 使 用 能 让 它 保 留 在 源 代 码 里 的 方法 ， 








以 供 屏幕 阅读 顺和 搜索 引 警 访问 。 


> 作为 给 屏幕 阅读 器 用 户 提供 的 一 项 服务 ， 请 提供 一 个 “ 跳 过 ”链接 ， 让 他 们 可 以 快速 越 





过 图 表 标记 ,访问 网 页 里 那些 更 有 意义 的 数据 。 


对 话 框 释 加 层 











对 话 框 ( Dialog ) 和 县 加 层 ( Overlay ) 所 呈现 的 内 容 看 上 去 就 像 是 悬浮 在 页 面 上 方 。 对 话 框 
通常 提供 更 为 丰富 的 交互 内 容 ， 比 如 内 骸 的 表单 元 素 、 按 钮 和 链接 ,并 要 求 用 户 做 出 决定 或 者 进 
行 输入 ， 而 县 加 层 通 常 呈现 的 是 只 读 内 容 。 对 话 框 和 又 加 层 的 使 用 范围 都 很 广 ， 包 括 : 
> 呈现 系统 错误 消息 和 确认 信息 ， 要 求 用 户 通过 交互 操作 加 以 关闭 ; 
> 在 表单 或 多 步骤 向 导 里 收集 用 户 输入 信息 ; 
> 点 击 网 页 上 的 某 张 缩 略 图 后 ， 在 一 个 “灯箱 ”里 显示 更 大 尺寸 的 照片 版 本 ; 
> 在 文档 编辑 右 等 Web 应 用 程序 里 创建 浮动 调 色 板 和 UI 检查 右 和 窗口 ; 
> 打开 一 个 “吸附 式 ” 的 工具 提示 或 者 迷你 县 加 层 ， 提 供 紧 凑 格 式 的 内 容 与 功能 。 
对 话 框 和 疤 加 层 都 可 以 采用 两 种 宽泛 的 交互 模型 模式 (modal ) 和 非 模 式 ( non-modal ): 
> 模式 对 话 框 或 琶 加 层 在 打开 时 会 阻止 用 户 与 下 层 网 页 进行 任何 交互 ， 限 制 用 户 并 将 用 
户 注意 力 集中 在 完成 当前 的 交互 操作 上 。 为 了 明确 表现 这 种 关系 ， 许 多 设计 师 要 求 把 
一 个 半 透 明 层 ( 颜色 或 深 或 浅 ) 放 在 对 话 框 和 网 页 主体 之 间 ， 使 网 页 看 上 去 暂时 不 可 
用 , 并 且 在 视觉 上 帮助 突出 又 加 层 。 模 式 对 话 框 和 合 加 层 适 用 于 确认 用 户 的 交互 操作 ， 
提供 重要 的 错误 或 系统 消息 、 用 表单 收集 用 户 输入 信息 ,或 者 只 是 将 注意 力 集中 到 特 
定 内容 上 。 

> 韭 模式 对 话 框 或 苹 加 层 在 打开 时 能 让 用 户 继续 与 基底 网 页 交互 。 它 适用 于 对 话 框 根据 与 
用 户 的 交互 动态 更 新 网 页 这 种 情形 ， 比 如 浮动 调 色 板 、 帮 助 内 容 面 板 、 搜 索 框 或 者 聊天 
窗口 。 

对 话 框 和 疤 加 层 可 以 有 固定 的 大 小 和 位 置 , 也 可 以 是 可 移动 和 可 缩放 的 , 以 帮助 它们 营造 出 
桌面 PC 上 工具 面板 和 应 用 程序 窗口 的 感觉 。 这 两 者 都 可 以 相当 容易 地 使 用 现代 Web 技 术 构 建 , 但 
它们 可 能 会 给 屏幕 阅读 器 带 来 不 便 ， 除 非 内 建 了 键盘 访问 、 焦 点 管理 和 ARIA 属 性 等 可 访问 性 功 
能 。 另 一 个 重要 的 考虑 事项 是 如 何 让 内 容 和 功能 对 基本 体验 里 的 用 户 可 用 , 特别 是 当 你 在 增强 体 
验 里 使 用 Ajax 获 取 厂 加 层 内 容 时 。 

这 一 章 会 讨论 如 何 用 渐进 增强 方法 制作 可 访问 的 对 话 框 与 琶 加 层 。 我 们 会 重点 关注 对 话 框 ， 
因为 你 在 更 简单 的 受 加 层 中 需要 应 对 的 一 切 复杂 状况 对 话 框 里 都 有 。 我 们 的 范例 会 使 用 Ajax 来 更 
新 对 话 框 内 容 ， 从 而 强调 在 应 对 这 种 更 为 复杂 的 情形 时 ， 需 要 使 用 的 特定 技巧 。 
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13.1 X 光 透视 
我 们 的 目标 设计 是 一 种 经 常会 用 到 对 话 框 的 情况 : 某 个 网 站 的 全 局 页 头 上 有 登录 和 注册 的 链 


接 ， 它 们 会 在 网 页 上 层 打开 迷你 表单 ， 让 用 户 留 在 当时 的 网 站 位 置 。 出 于 本 次 讨论 的 目的 ,我 们 
会 把 重点 放 在 登录 表单 上 ， 如 图 13-1 所 示 ， 不 过 注册 表单 也 会 使 用 相同 的 原则 和 编程 方法 。 


Email Address: 


Password 





图 13-1 登录 模式 对 话 框 的 目标 设计 


用 X 光 透视 这 个 登录 对 话 框 设 计 ， 我 们 能 清楚 地 看 出 这 个 对 话 框 是 模式 的 ， 而 且 有 着 固定 的 
大 小 。 它 里 面 的 表单 字段 可 以 很 容易 地 编写 成 一 张 简单 的 HTML 表 单 ， 在 任何 设备 上 都 能 工作 。 
最 大 的 问题 是 : 表单 代码 应 该 放 在 标记 里 的 什么 位 置 ? 

我 们 有 两 个 选择 : 把 登录 表单 添加 到 网 站 每 一 张 网 页 的 基础 标记 里 , 或 者 链接 到 一 张 单独 的 
登录 页 上 。 

如 果 我 们 把 登录 表单 放 在 基础 标记 里 , 顶部 的 登录 链接 就 会 是 一 个 内 部 销 链 接 , 点 击 后 会 将 
用 户 滚动 到 页 面 上 的 标签 块 。 这 种 方法 的 优点 是 内 容 立 即 可 用 并 且 完 全 可 访问 , 缺点 是 这 张 表单 
的 标记 需要 放 在 网 站 的 每 一 张 网 页 中 , 从 而 增加 了 基本 体验 里 的 网 页 体积 和 视觉 杂乱 感 , 尤其 是 
同时 放置 登录 和 注册 表单 时 。 

另 一 个 选择 是 创建 一 张 单独 的 HTML 登 录 表 单 页 ,并 在 基础 标记 里 链接 到 这 张 网 页 。 这 样 做 
能 最 大 程度 地 减 小 基本 体验 里 的 网 页 体积 和 视觉 杂乱 感 。 

无 论 哪 一 种 方法 都 是 可 行 的 。 最 终 选 择 取决 于 目标 网 站 里 对 话 框 的 重要 性 和 使 用 频率 , 以 及 
各 个 对 话 框 里 的 内 容 标 记 大 小 。 在 当前 这 种 情形 里 , 我 们 想 要 尽 可 能 地 保持 网 页 轻 量化 ， 所 以 使 
用 单独 的 链接 页 这 一 方式 。 
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在 基本 体验 里 ， 全 局 页 头 里 的 “登录 ”( Login ) 链接 会 将 用 户 导 航 到 一 张 单独 的 登录 页 上 。 
如 果 用 户 点 击 了 这 张 登录 页 里 的 “忘记 了 你 的 密码 ? ”( forgot your password? ) 链接 ， 他 们 就 会 
被 导航 到 一 张 单独 的 密码 取 回 页 上 。 如 果 用 户 没 有 正确 填写 其 中 任何 一 张 表单 ,服务 器 就 会 重新 
加 载 该 表单 ,高 亮 显 示 没 有 正确 填写 的 字段 并 显示 相应 的 错误 消息 。 如 果 用 户 成 功 填 完 其 中 任何 
一 张 表 单 , 那么 他 们 就 会 回 到 之 前 所 在 的 页 面 ， 而 页 头 会 进行 更 新 以 反映 出 他 们 的 登录 状态 。 这 
些 独立 链接 的 网 页 将 完全 可 以 用 键盘 访问 和 导航 ， 只 要 我 们 为 链接 和 表单 使 用 的 是 语义 化 HTML 
标记 ， 如 图 13-2 所 示 。 























Placeholder text news & commenta i 
Log in Get password 
PE il 
Ipsum Opinions Email Address:_ Email Address: 
人 
。Lognn = pasword remo) 
® Register 上 
Forgot your password? 

















图 13-2 ”基本 体验 登录 顺序 里 的 多 张 链接 网 页 


基本 体验 里 需要 的 所 有 由 服务 器 生成 的 网 页 和 逻辑 都 在 增强 体验 里 重用 。 
原生 的 对 话 杠 HTML 元 素 并 不 存在 ， 增 强 体 验 将 会 用 一 个 div 作 为 表单 内 容 的 容器 ， 然 后 在 
对 话 框 里 用 Ajax 载 人 和 显示 它 ， 如 图 13-3 所 示 。 























图 13-3 ”增强 体验 利用 Ajax 把 登录 顺序 引入 对 话 杠 


13.2 ”创建 对 话 框 


我 们 已 经 勾勒 出 一 种 制作 登录 对 话 框 的 方法 ， 接 下 来 就 可 以 编写 基本 屏幕 所 需 的 基础 标记 ， 
以 及 用 来 创建 增强 模式 对 话 框 这 一 表现 方式 的 增强 样式 和 脚本 。 


13.2.1 基础 标记 和 样式 


我 们 的 基础 标记 由 两 部 分 组 成 : 一 个 是 基础 网 页 里 的 标准 锁链 接 ， 它 指向 包含 登录 表单 的 
login.html 页 : 
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<a href="login.html" id="option-login">Log in</ay> 
另 一 个 是 一 张 完整 的 HTML 网 页 : login.html。 它 包含 了 网 站 的 全 局 导航 元 素 和 所 有 的 登录 表 
单 内 容 。 











在 增强 体验 里 ， 只 需要 login.html 网 页 标记 中 的 一 个 子 集 ， 就 是 包含 标题 和 表单 的 部 分 。 
我 们 会 用 Ajax 请 求 完 整 的 网 页 ， 然 后 过 滤 它 的 内 容 ， 留 下 想 要 显示 在 增强 对 话 框 里 的 那 部 分 
内 容 。 


为 了 给 Ajax 请 求 准备 这 个 内 容 子 集 ， 我 们 会 在 一 个 id 为 login 的 div 容 器 里 存放 它 ， 然 后 创建 
一 个 描述 网 页 内 容 的 标题 ， 一 张 包含 多 对 labels 和 文本 input 的 登录 表单 ， 以 及 一 个 提交 表单 数 
据 的 “前 进 ”( Go ) 按钮 。 表 单元 素 的 后 面 有 一 个 “忘记 了 你 的 密码 ? ”链接 ， 它 指向 一 张 单独 
的 密码 取 回 页 : 


<div id="login"> 
<h1>Log in</h1> 
<form action="login.php" method="post" id="login-form"> 
<label for="email">Email Address:</label> 
<input type="text" class="type-text" name="email" id="email" /> 
<label for="email">Password</label> 
<input type="password" class="type-text" name="password" 
id="password" /> 
<input type="submit" id="submit-login" name="submit-login" value="Go" /> 
<a href="forgot pass.html" class="alt-option">Forgot your password?</a> 
</form> 
</div> 


这 张 表 单 的 基础 标记 在 没有 应 用 CSS 时 也 是 功能 完备 的 , 但 它 的 标签 、 输 入 框 、 按 钮 和 链接 
都 分 布 在 同一 行 ， 看 上 去 有 些 笨拙 ， 如 图 13-4 所 示 。 























Log in 














Email Address: Password | (G0 ) Forgot your password? 








图 13-4 login.html 里 的 无 样式 基础 标记 





为 了 改善 这 种 状况 , 我 们 会 给 基本 样式 表 添加 一 些 安全 样式 , 包括 设置 网 页 的 默认 字体 ， 以 
及 把 lapel 和 jinput 元 素 设 为 display:block， 使 它们 各 占 一 行 。 输 入 框 元 素 则 会 带 有 1em 的 底部 外 
边 距 样式 ， 从 而 给 表单 字段 之 间 提 供 更 多 的 垂直 空间 : 

body, input { font-family: "Segoe UI", Arial, sans-serif; } 

label, input { display:block; } 

input { margin-bottom:1em; } 

这 些 简单 又 安全 的 CSS 规 则 让 我 们 的 表单 在 基本 体验 里 更 加 清晰 和 易于 阅读 ， 如 图 13-5 
所 示 。 
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Log in 


Email Address: 





Password 





Go 


Forgot your password? 











图 13-5 ”应 用 安全 样式 后 的 基础 标记 





13.2.2 ”增强 标记 和 样式 


在 增强 体验 里 , 我 们 希望 用 户 的 注意 力 集中 在 完成 登录 操作 上 , 不 想 支 持 他 们 同时 与 基础 网 
页 进行 交互 。 为 此 ， 要 分 别 为 两 个 组 件 创建 标记 : 一 个 是 半 透 明 的 遮 单 ， 它 覆盖 基础 网 页 的 内 容 
并 禁用 其 功能 ; 另 一 个 是 对 话 框 容器 ， 它 浮动 在 遮 沸 上 方 ， 展 现 表单 内 容 。 

要 实现 这 种 模式 庶 日 效果 , 增强 脚本 需要 在 pody 元 素 末尾 的 增强 标记 里 插 人 两 个 元 素 : 一 个 
是 获取 背景 色 和 透明 度 变 化 的 div， 另 一 个 是 它 内 艇 的 iframe， 后 者 施加 的 保护 行为 能 防止 用 户 
与 下 方 的 网 页 进行 交互 。 必 须 设 置 这 个 iframe 的 src， 和 否则 一 些 浏览 需 会 发 出 安全 和 警告， 所 以 我 
们 会 把 它 设 为 javascript:false; ， 起 空 值 的 作用 ， 防 止 它 发 起 不 必要 的 HTTP 请 求 : 

<div class="modal-screen"><iframe src="javascript:false;"></iframe></div> 

div 的 高 度 和 宽度 样式 被 设置 为 100% 以 填 满 整个 屏幕 ， 它 的 深 灰 色 渐 变 背 景 图 像 具 有 90% 的 
opacity, 让 网 页 内 容 在 支持 CSS 透 明度 的 浏览 器 里 能 透 过 谈 单 层 略 微 显 示 一 点 。 它 还 有 一 个 很 大 
的 z-index 值 ， 以 确保 它 会 堆 蔷 在 其 他 设置 了 z-index 属性 的 网 页 元 素 之 前 : 


.modal-screen { 
background:#717174 url(../images/bg-modal-screen.png) top repeat-x; 
position:absolute; 
width:100%; 
overflow:hidden; 
height:100%; 
top:0; 
left:0; 
opacity: .9; 
z-index: 9999; 

} 


这 个 div 里 的 iframe 是 作为 一 种 变通 方式 来 解决 某 些 浏览 器 里 的 z-index( 即 CSS 堆 释 顺 序 ) 
问题 ， 这 个 问题 会 导致 浏览 器 错误 地 将 网 页 元 素 ( 包括 下 拉 菜 单 和 带 有 滨 动 条 的 元 素 ) 显示 在 遮 
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置 层 和 对 话 框 的 前 面 ， 无 论 样式 表 里 如 何 设置 z-index 扒 县 顺序 都 是 如 此 。iframe 则 能 够 一 致 而 
可 靠 地 堆 县 在 任何 网 页 元 素 的 上 方 , 因此 它 就 像 是 模式 遮 四 层 和 对 话 框 的 一 个 保护 层 。 我 们 会 把 
它 的 高 度 和 宽度 设 为 100% 来 填 满 整个 模式 遮 鄙 层 div，opacity 则 设置 为 0 ( 我们 会 用 JavaScript 强 
化 这 个 属性 ， 让 它 在 原生 不 支持 CSS opacity 属 性 的 Internet Explorer 6 里 也 能 正常 工作 )。 虽 然 它 
是 透明 的 ， 但 是 它 仍然 能 避免 任何 z-index 问 题 的 出 现 。 


.modal-screen iframe { 
height:100%; 
width:100%; 
position:absolute; 
top:0; 
left:0; 
padding:0; 
margin:0; 
opacity: 0; 


为 了 完成 遮 日 层 效 果 ， 脚 本 会 在 对 话 框 显 示 时 给 body 元 素 添 加 一 个 class ， 去 除 浏览 带 窗 口 
里 的 所 有 滚动 条 ， 防 止 用 户 将 对 话 框 滚动 出 视野 ， 如 图 13-6 所 示 。 
body.blocked { 


overflow:hidden; 


} 








图 13-6 “模式 遮 团 层 覆 盖 了 网 页 的 全 部 内 容 





草拟 出 模式 遮 置 层 的 标记 和 样式 后 ,现在 可 以 继续 编写 对 话 框 的 代码 了 。 首 先 ,给 body 元 素 
添加 一 个 值 为 application 的 role, 使 屏幕 阅读 器 能 正确 识别 这 个 对 话 框 组 件 , 并 让 我 们 能 编写 自 
定义 的 键盘 行为 : 


<body role="application"> 
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为 了 给 对 话 框 创建 一 个 容 右 ， 增 强 脚 本 会 生成 一 个 ID 为 dialog 的 div: 

<div id="dialog"></div> 

为 了 支持 可 访问 性 , 给 这 个 div 添 加 一 个 值 为 dialog 的 ARIA role 属 性 ,告诉 屏幕 阅读 器 它 不 
是 一 个 标准 的 div， 而 是 在 扮演 对 话 框 UI 组 件 这 一 角色 。 我 们 还 会 给 这 个 div 指 派 一 个 唯一 的 id， 
它 会 被 “关闭 ”( Close ) 链接 引用 。 另 外 ， 设 置 一 个 值 为 false 的 aria-hidden 属 性 ， 告 诉 屏幕 阅 
读 帮 此 对 话 框 当前 是 可 见 的 : 

<div id="dialog" role="dialog" aria-hidden="false"></div> 

增强 脚本 会 用 Ajax 载 人 整 张 login.html 页 ， 找 到 基本 页 面 的 登录 表单 内 容 div ( 即 所 iogin ) 里 
的 所 有 内 容 ， 然 后 将 这 块 标记 添加 到 对 话 框 div 里 : 


<div id="dialog" role="dialog" aria-hidden="false"> 
<div id="login"> 
<h1>Log in</h1> 
<form action="login.php" method="post"> 
<label for="email">Email Address:</label> 
<input type="text" class="type-text" name="email" id="name" /> 
<label for="email">Password</label> 
<input type="password" class="type-text" name="password" 
id="password" /> 
<input type="submit" id="submit-login" name="submit-login" value="Go" /> 
<a href="forgot pass.html" class="alt-option">Forgot your password?</a> 
</form> 
</div> 
</div> 


考虑 到 样式 的 一 致 性 ， 脚 本 会 用 一 个 带 有 dialog-content 类 的 容器 div 围 住 对 话 框 的 全 部 
内 容 : 


<div id="dialog" role="dialog"aria-hidden="false"> 
<div class="dialog-content"> 
<div id="login"> 
<h1>Log in</h1> 
...login form markup... 
</div> 
</div> 
</div> 


根据 ARIA 规 范 的 规定 ， 使 用 dialog 这 个 role 时 ， 应 该 在 标记 里 添加 aria-labelledby 属 性 ， 
指向 扮演 对 话 框 标签 角色 的 元 素 id。 为 了 遵循 这 一 规定 ,增强 脚本 会 给 对 话 框 内 容 里 的 h1 元 素 指 
派 一 个 dialog-title 的 id， 以 供 这 个 属性 引用 。 这 一 联系 建立 后 ， 屏 幕 阅读 器 就 会 知道 “登录 ” 
标题 描述 了 这 个 对 话 框 的 用 途 ， 并 可 能 会 在 对 话 框 出 现时 朗读 出 “登录 对 话 框 ”。 
<div id="dialog" role="dialog" aria-hidden="false"aria-labelledby= "dialog-title" > 
<div class="dialog-content"> 
<div id="login"> 
<h1 id="dialog-title" >Log In</h1> 
...login form markup... 
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</div> 
</div> 
</div> 


注意 ”如 果 标 记 里 没有 这 个 属性 能 够 关联 的 描述 性 元 素 ( 比如 一 个 标题 )， 可 以 使 用 aria-label 
属性 ， 把 它 作 为 对 话 框 标题 提供 给 屏幕 阅读 器 


增强 脚本 会 在 标题 元 素 后 面 附加 一 个 链接 , 它 关闭 对 话 框 的 行为 。 可 以 告诉 屏幕 
阅读 需 这 个 链接 扮演 了 “关闭 ”按钮 的 角色 ， 个 链接 指派 一 个 ARIA 属 性 aria-controls 
来 引用 对 话 杠 div 的 ID ， 并 添加 role=button 属 性 : 


<div id="dialog" role="dialog" aria-hidden="false" 
aria-labelledby="dialog-title"> 
<a href="#" class="dialog-close" role="button" aria-controls="dialog"> Close</a> 
<div class="dialog-content"> 
<div id="login"> 
<h1 id="dialog-title">Log In</h1> 
..login form markup... 
</div> 
</div> 
</div> 


对 话 框 div 的 增强 CSS 会 将 它 设置 成 固定 宽度 ， 并 将 它 绝对 定位 到 屏幕 中 央 。 我 们 的 做 法 是 
设置 一 个 50% 的 left 值 ， 然 后 用 等 同 于 半 个 对 话 框 宽度 ( 即 125px ) 的 左 侧 外 边 距 负 值 进行 偏 移 。 
我 们 会 在 支持 CSS3 盒 阴影 属性 的 现代 浏览 锅 里 添加 阴影 效果 ， 并 设置 一 个 z-index 把 它 移 到 模式 
全 加 层 的 前 面 : 


#dialog { 
background:#fff; 
position:absolute; 
width:250px; 
top:20%; 
left:50%; 
margin-left:-125px; 
-0-box-shadow:0 0 8px #111; 
-moz-box-shadow:0 0 8px #111; 
-webkit-box-shadow:0 0 8px #111; 
box-shadow:0 0 8px #111; 
z-index: 10000; 


} 

我 们 把 标题 和 “关闭 ”按钮 都 浮动 到 了 左 侧 ,让 它们 能 够 并 排 显 示 。 标题 有 一 张 背景 渐变 图 
像 和 一 些 样式 ， 这 些 样式 的 作用 是 给 文本 设置 让 人 感觉 舒服 的 外 边 距 和 内 边 距 。 “关闭 ”链接 有 
一 个 “x” 图 标 ， 通 过 在 文本 左 侧 添加 一 张 背 景 图 像 来 实现 ， 并 加 入 了 鼠标 上 惹 停 时 显示 下 划 线 的 
样式 规则 : 
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#dialog-title { 
background:#8c8c8d url(../images/bg-dialog-title.png) top repeat-x; 
font-size:1.4em; 
Color:#fff; 
margin:0 0 20px 30px; 
padding:30px 8px 10px; 
float:1left; 
text-decoration:none; 
outline:none; 


.dialog-close { 
position:absolute; 
top:34px; 
right:30px; 

Color:#888; 

font-size:1.2em; 

text-decoration:none; 
background:url(../images/icon-close.png) right 50% no-repeat; 
padding-right:15px; 

} 

.dialog-close:hover { 
text-decoration:underline; 


} 

包围 对 话 框 内 容 的 div 清 除了 标题 和 “关闭 ”链接 的 浮动 ， 这样 它 就 会 总 是 处 于 两 者 的 下 方 。 
form 元 素 的 样式 设置 了 基本 的 字体 格式 、 间 距 ， 以 及 标签 、 文 本 输入 框 和 “提交 ”( Submit ) 按 
钮 所 需 的 颜色 : 


.dialog-content { 
clear: both; 

} 

form { 
padding:10px 30px 20px; 
overflow:auto; 
clear:both; 








} 

form label { 
display:block; 
font-size:1.3em; 
color:#808080; 
margin:.6em 0 .3em; 
padding-left:10px; 

} 

form input.type-text { 
margin: .3em 0 1.2em; 
display:block; 
border:1px solid #fff; 
background:#E6E6E6; 
padding: .3em .4em; 
font-size:1.3em; 


} 
:focus 伪 类 让 我 们 可 以 在 用 户 把 焦点 移 到 文本 input 上 时 ， 为 其 指定 更 深 的 边框 颜色 。 一 些 
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浏览 器 会 给 获得 焦点 的 元 素 添加 额外 的 视觉 反馈 ， 比 如 苹果 公 ee 出 现 蓝 色 的 
光 ， 如 图 13-7 所 示 。 哩 然 可 以 通过 设置 输入 框 的 CSS outline 属 性 来 覆盖 这 种 反馈 ， 但 我 们 的 建 
议 是 : 只 要 有 可 能 ， 0 

form input.type-text:focus { 


border-color:#aaa; 


} 


Log in Close 先 


Email Address 
hello@acme.com 


Password 


Co Forgot your password? 





图 13-7 添加 样式 后 的 增强 体验 登录 表单 标记 


13.2.3 ”对 话 框 增强 脚本 


我 们 已 经 创建 了 基础 标记 ， 并 规划 了 对 话 框 所 需 的 增强 标记 和 样式 ， 现 在 编写 JavaScript 来 
生成 对 话 框 的 标记 ， 并 给 那些 通过 能 力 测试 的 浏览 需 指 派 行为 。 

首先 ， 给 body 元 素 添 加 值 为 application 的 role: 

$('body').attr('role','application'); 

只 要 点 击 增强 体验 里 的 “登录 ”链接 就 会 打开 登录 对 话 框 。 为 此 ， 首 先 给 链接 绑 定 一 个 点 击 
事件 : 


$('#option-login').click(function(){ 
/ee 这 里 放 点 击 事件 的 脚本 








1. 生成 来 自 Ajax 的 增强 标记 
只 要 点 击 这 个 链接 ， 脚 本 就 会 用 Ajax 向 Web 服 务 器 请 求 对 话 框 的 内 容 。 我 们 会 使 用 jQuery 的 
$.get 工 具 方 法 (utility method ) 借助 Ajax 载 人 网 页 ,方法 是 传递 登录 链接 的 href 属 性 作为 我 们 想 
要 请 求 的 URL: 
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$('#option-login').click(function(){ 
$.get( $(this).attr('href') ); 
]); 


$.get 这 个 Ajax 工具 提供 了 一 个 回调 函数 ， 它 会 在 服务 需 响 应 并 返回 login.html 页 时 执行 。 这 个 
响应 ( 由 下 面 的 response 变 量 提供 ) 是 HTML 网 页 源 代码 的 全 文 ， 因 此 需要 在 其 中 搜索 并 找到 我 们 
要 的 特定 对 话 框 标记 。dialogContent 变 量 从 完整 的 Ajax 响 应 里 引用 了 登录 页 中 的 登录 div 元 素 : 


$('#option-login').click(function(){ 
$.get($(this).attr('href'), function(response){ 
// 获 取 ajax 的 响应 文本 ， 在 一 个 $() 里 引用 它 
var response = $(response); 
// 找 到 响应 文本 里 的 登录 djiv， 用 于 对 话 框 内 容 
var dialogContent = Tesponse.find( "#login'); 
]); 
]); 


有 了 这 些 内 容 之 后 ， 脚 本 就 可 以 根据 我 们 之 前 规划 的 增强 标记 模板 生成 对 话 框 : 


$('#option-login').click(function(){ 
$.get($(this).attr('href'), function(response){ 
// 获取 ajax 的 响应 文本 ， 在 一 个 $() 里 引用 它 
var response = $(response); 





// 找到 响应 文本 里 的 登录 div， 用 于 对 话 框 内 容 
var dialogContent = response.find('#login'); 


// 找到 将 会 扮演 对 话 框 标题 角色 的 元 素 
var dialogTitle = dialogContent.find('h1'); 


// 给 标题 添加 ID 属性 ， 以 供 ARIA 引 用 
dialogTitle.attr('id', 'dialog-title'); 


// 创 建 模式 庶 曾 层 
var modalScreen = $('<div class="modal-screen"> 
wiframe src="javascript:false;"></iframe></div>'); 





// 设 置 模式 让 曾 层 的 透明 度 以 修补 Internet Explorer 
modalScreen.children(0).css('opacity' ,0); 


// 创建 对 话 框 的 包装 器 div 
var dialog = $( "<div id="dialog" role="dialog" 
waria-hidden="false" aria-labelledby="dialog-title"></div>'); 


// 创建 关闭 链接 

var close = $('¢a href="#" class="dialog-close" 

wrole="button" aria-controls="dialog">Close</a>') 
.appendTo(dialog); 


// 创建 内 容 div 
var content = $('<div class="dialog-content"></div>') 
.append(dialogContent) 
.appendTo(dialog); 
]); 
]); 
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在 这 个 阶段 , 脚本 已 经 用 Ajax 获取 了 完整 的 登录 页 , 解析 出 了 表单 所 需 的 相关 内 容 并 且 
加 遮 音 层 和 对 话 框 收集 了 完整 的 增强 标记 ， 它 已 经 














2. 给 增强 标记 应 用 行为 
为 了 用 脚本 给 对 话 框 标记 应 用 


























和 人 件 ， 首 先 创 到 





准备 好 给 对 话 框 标记 应 用 如 





有 件 了 。 





一 个 自 定义 的 close 事 件 ， 它 列 出 了 对 话 框 关 


闭 时 必须 发 生 的 所 有 事情 : 移 除 模式 遮 置 层 、 对 话 框 标记 ， 以 及 pody 上 用 来 防止 窗口 滚 动 的 
blocked 类 。 这 个 事件 可 以 在 多 种 情形 下 触发 : 点 击 “关闭 ”按钮 、 按 下 Esc 键 或 者 登录 成 功 。 考 
虑 到 上 下 文 环 境 和 清晰 度 ， 后 面 的 代码 范例 会 用 省 略 号 来 代替 它们 先前 的 部 分 代码 。 


$('#option-login').click(function(){ 
$.get($(this).attr('href'), function(response){ 
先前 的 对 话 框 代码 
// 给 对 话 框 div 绑 定 一 个 自 定义 关闭 事件 
dialog.bind('close' ,function(){ 
// 移 除 页 面 里 的 模式 遮 哩 层 
modalScreen.remove(); 


// 移 除 页 面 里 的 对 话 框 div 
dialog.remove(); 


// 移 除 body 上 的 blocked 类 
$('body').removeClass('blocked'); 
}); 
}); 
}); 


我 们 会 在 点 击 “ 关 闭 ” 按 钮 时 触发 close 事 件 
更 新 为 链接 的 href 值 : 


$('#option-login').click(function(){ 
$.get($(this).attr('href'), function(response){ 
先前 的 对 话 框 代码 
// 给 关闭 按钮 绑 定 click 事 件 
close.click(function(){ 
// 和 触发 对 话 框 的 close 事件 
dialog.trigger('close'); 


// 防 止 链接 的 href # 人 修改 Url 
return false; 
)); 
}); 
}); 


close 事 件 还 会 在 月 


$('#option-login').click(function(){ 
$.get($(this).attr('href'), function(response){ 
先前 的 对 话 框 代码 








$(document).keydown(function(ev){ 
if(ev.which == 27){ 


， 并 让 click 事 件 返 回 false 来 防止 URL 间 号 日 


Ud 











有 户 每 次 按 下 Esc 键 时 触发 ,方法 是 寻找 keydown 事 件 里 按键 的 keyCode( 27 ): 
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dialog.trigger('close'); 


3. 添加 和 显示 对 话 框 
生成 对 话 框 标记 并 绑 定 事件 之 后 ， 增 强 脚本 会 给 body 元 素 添加 blocked 类 来 防止 它 滚动 ， 并 
把 完成 后 的 对 话 框 组 件 插入 网 页 ， 使 其 可 见 : 


$('#option-login').click(function(){ 
$.get($(this).attr('href'), function(response){ 
Ss 先前 的 对 话 框 代码 …… 
// 找 到 body 元 素 ， 添 加 类 ， 插 入 对 话 框 
$('body') 
.addClass('blocked') 
.append(modalScreen) 
.append(dialog); 











)3 
}); 


4. 管理 焦点 
通过 管理 键盘 焦点 来 优化 导航 和 可 访问 性 是 构建 快速 高 效 对 话 框 的 一 个 关键 步骤 。ARIA 规 
范 建议 把 光标 焦点 移 到 对 话 框 内 ， 这样 用 户 就 可 以 开始 和 里 面 的 内 容 交 互 了 。 否则 的 话 ， 如 果 对 
































话 框 打开 后 焦点 还 停留 在 下 方 的 网 页 上 ， 就 会 让 人 感到 非常 困惑 

在 我 们 的 登录 表单 中 ,“ 关 闭 ” 链 接 虽 然 从 技术 上 看 是 对 话 框 里 第 一 个 可 获得 焦点 的 元 素 ， 
但 是 , 对 话 框 打 开 时 最 有 用 的 可 获得 焦点 元 素 却 是 第 一 个 文本 输入 框 , 因为 用 户 可 以 立即 开始 输 
和 他们 的 邮箱 地 址 。 我 们 会 用 jQuery 找到 dialogContent 里 的 第 一 个 input， 然 后 把 焦点 移 到 它 
这 里 : 


$('#option-login').click(function(){ 
$.get($(this).attr('href'), function(response){ 
ee 先前 的 对 话 框 代码 ……: 
// 聚 焦 登 录 表 单 里 的 第 一 个 input 
dialogContent.find('input' )[0].focus(); 





5 
]); 
当 焦 点 放 在 第 一 个 文本 input 上 后 ， 用 户 就 可 以 用 Tab 键 导航 到 接 下 来 的 密码 input 、 提 交 按 





钮 ， 直 至 最 后 的 “忘记 了 你 的 密码 ”链接 。 

再 次 按 下 Tab 键 产生 的 原生 行为 是 将 焦点 移出 对 话 框 ， 转 到 底下 网 页 源 代码 顺序 里 下 一 个 可 
获得 焦点 的 项 上 。 这 会 让 用 户 感到 困惑 ， 因 为 对 话 框 被 设计 成 模式 对 话 框 。 脚 本 会 通过 程序 把 焦 
点 限制 在 对 话 框 内 ,从 “关闭 ”链接 开始 ， 然 后 移 向 各 个 表单 字段 。 我 们 实现 这 种 限制 的 方法 是 
给 整个 document 绑 定 一 个 focus 事 件 ， 只 要 焦点 发 生变 化 就 会 触发 该 事件 。 变 化 发 生 时 ， 脚 本 会 
仿 查 新 近 获 得 焦点 的 元 素 是 否 在 对 话 框 div 之 外 ， 如 果 是 ， 就 把 焦点 移动 到 对 话 框 内 第 一 个 可 获 
得 焦点 的 元 素 上 : 





Wr 
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$('#option-login').click(function(){ 
$.get($(this).attr('href'), function(response){ 
i 先前 的 对 话 框 代码 ……… 


// 原 生 可 获得 焦点 的 元 素 列 表 ， 加 上 那些 带 有 tabindex 的 元 素 
var focusable = 'a,input,button, textarea, select, [tabindex] '; 


// 给 document 绑 定 一 个 focus 事 件 
$(document).bind('focus', function(ev){ 


// 如 果 网 页 上 有 对 话 框 ， 并 且 获 得 焦点 的 元 素 不 在 该 对 话 框 内 
if($('#dialog').length 8& 
!$(ev.target).parents('#dialog').length){ 
// 把 焦点 移 到 对 话 框 里 第 一 个 可 获得 焦点 的 元 素 上 
dialog.find(focusable)[0].focus(); 


13.3 ”让 对 话 框 更 进一步 


前 面 的 摘要 涵盖 了 创建 单个 固定 大 小 的 模式 对 话 框 所 需 的 一 切 标记 、 样式 和 脚本 范例 , 但 是 
你 可 能 想 实现 许多 其 他 对 话 框 / 层 加 层 功 能 与 方案 ， 包 括 用 非 模式 对 话 框 来 提供 工具 面板 ， 制 作 
像 照 片 幻灯 片 那样 显示 图 片 的 简单 到 加 层 , 以 及 用 可 缩放 的 帮助 文本 闭 加 层 在 页 面 上 方 显示 补充 
的 内 容 。 

jQuery UI 对 话 框 插件 包含 了 一 套 扩展 功能 集 来 实现 这 些 对 话 框 和 羡 加 层 方案 ( 例如 模式 和 
非 模式 的 相应 能 力 、 缩 放 、 拖 动 、 定 位 ， 以 及 对 同时 在 网 页 上 显示 多 个 对 话 框 的 支持 能 力 )， 还 
考虑 到 了 ARIA 支 持 。 不 仅 如 此 ，jQuery UI 对 话 框 还 可 用 ThemeRoller 工 具 修 改 样式 。 可 以 到 这 里 
访问 jQuery UI 对 话 框 插件 的 演示 和 文档 : jqueryui.com/demos/dialog, 下 载 这 个 对 话 框 插件 的 地 址 


是 : jqueryui.com/download。 


13.4 ”使 用 对 话 框 脚本 


本 书 附 带 的 演示 和 代码 (位 于 本 书 的 网 站 上 : www.filamentgroup.com/dwpe ) 包含 一 个 脚本 : 
jQuery.dialog.js。 它 将 本 章 展 示 的 创建 单个 对 话 框 的 技巧 集中 到 一 个 jQuery 插件 里 ,便于 你 在 你 
的 项 目 里 使 用 。 

要 在 你 的 网 页 里 使 用 这 个 脚本 , 请 下 载 并 引用 对 话 框 范例 页 里 列 出 的 那些 文件 , 然后 只 需 找 
到 网 页 上 的 某 个 元 素 ( 甚至 可 以 是 jQuery 函数 封装 的 一 串 HITML 标 记 ) 并 对 其 调用 dialog 方 法 即 
可 。 举 个 例子 ,假设 网 页 上 有 一 张 id 为 login 的 表单 ， 要 把 这 张 表单 显示 在 一 个 对 话 框 里 ， 需 要 
用 一 个 jQuery 选择 需 找 到 它 并 对 其 调用 dialog 方 法 : 

$('form#login').dialog(); 
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dialog 方 法 会 自动 生成 一 个 对 话 框 容器 , 用 于 存放 本 章 列 举 的 所 有 标记 和 行为 ,例如 模式 保 
护 遮 置 层 和 “关闭 ”链接 。 调 用 这 个 方法 时 ， 它 首先 会 关闭 网 页 上 现存 的 所 有 对 话 框 ， 确 保 任 一 
时 刻 只 有 一 个 对 话 框 是 可 见 的 。dialog 方 法 还 包含 了 title、buttons 和 focus 这 些 可 配置 的 选项 ， 
可 以 用 一 个 包含 键 / 值 对 的 对 象 来 传递 它们 。 

title 选 项 用 来 将 对 话 框 里 的 某 个 特定 元 素 指定 为 提供 给 屏幕 阅读 器 用 户 的 标题 ， 插 件 会 自 
动 给 这 个 元 素 应 用 一 个 dialog-title 的 id。title 选 项 接受 一 个 jQuery 选择 需 作 为 它 的 值 ， 如 果 没 
有 指定 title 选 项 , 插件 会 默认 使 用 第 一 次 出 现 的 下 列 元 素 之 一 : h1、h2 、h3、h4、h5 、h6 、legend、 
1abel 和 p。 举 个 例子 ， 下 面 的 代码 将 title 选 项 设置 为 对 话 框 内 容 区 域 里 的 第 一 个 span 元 素 : 

$('form#login').dialog({ 

title: 'span' 

}); 

buttons 选 项 让 你 能 生成 将 出 现在 对 话 框 底部 的 按钮 。 这 在 某 些 情形 下 很 有 帮助 ， 比 如 当 对 
话 框 扮演 提示 消息 的 角色 ， 要 求 用 户 必须 进行 确认 和 取消 时 。buttons 选 项 接受 它 自 己 的 键 / 值 对 
对 象 ， 为 这 些 对 分 别 生成 button 元 素 ， 并 将 它们 添加 到 一 个 带 有 dialog-footer 类 的 div 里 ， 这 个 
div 则 会 放置 在 对 话 框 标记 的 末尾 。 在 这 些 键 / 值 对 中 ， 键 作为 按钮 自身 的 HTML 文 本 ， 它 的 值 则 
是 一 个 会 在 点 击 按钮 时 执行 的 函数 。 举 个 例子 ,下 面 的 脚本 生成 一 个 带 有 两 个 按钮 的 对 话 框 ， 点 
击 这 些 按钮 时 会 分 别 触发 不 同 的 警告 : 

$('div#documentUnsavedPrompt' ) .dialog({ 

buttons: { 


'Okay': function(){ 
alert(' 你 点 击 了 确定 '); 
































'Cancel': function(){ 
alert(' 你 点 击 了 取消 '); 





}, 
} 
}); 
focus 选 项 让 你 指定 哪个 特定 元 素 应 该 在 对 话 框 打 开 时 获得 焦点 。 默 认 情 况 下 ， 搬 件 会 尝试 


聚焦 对 话 框 内 容 div 里 第 一 个 原生 可 获得 焦点 的 元 素 〈 比如 某 个 锚 、 表 单元 素 或 者 任何 带 有 
tabindex 属 性 的 元 素 )。 如 果 找 不 到 这 样 的 元 素 ， 它 会 选择 任何 由 buttons 选 项 生成 的 按钮 作为 备 
用 方案 ， 最 后 才 会 选择 对 话 框 的 “关闭 ”链接 。 可 以 指定 对 话 框 内 某 个 特定 元 素 的 jQuery 选择 需 
来 覆盖 focus 选 项 的 默认 设置 。 这 在 类 似 提 示 确 认 的 情形 中 也 许 很 有 用 ， 因 为 你 可 能 想 把 焦点 移 
到 “确定 ”按钮 上 ， 忽 略 对 话 框 里 的 内 容 : 


$('div#documentUnsavedPrompt' ) .dialog({ 
buttons: { 

'Okay': function(){ 
alert(' 你 点 击 了 确定 '); 

}), 

'Cancel': function(){ 
alert(' 你 点 击 了 取消 '); 

}), 
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focus: '.dialog-footer button:first 


]); 

对 话 框 插件 还 附带 一 个 工具 函数 (和 dialog 方 法 有 着 相同 的 名 称 )， 它 被 设计 用 来 创建 源 于 
外 部 内 容 的 对 话 框 。dialog 工 具 函 数 需 要 一 个 URL 参 数 来 指明 对 话 框 内 容 的 位 置 。 举 个 例子 ， 下 
面 的 脚本 会 用 login.html 页 里 的 内 容 创建 一 个 对 话 框 : 

$.dialog('login.html'); 

这 个 对 话 框 会 立即 打开 , 在 发 送 Ajax 请 求 时 显示 一 段 “ 加 载 中 ……” 的 消息 。 只 要 请 求 返 回 ， 
对 话 框 会 用 login.html 的 内 容 和 options 参 数 里 指定 的 设置 重建 自己 。 可 以 配置 加 载 时 显示 的 消息 ， 
方法 是 通过 options 参 数 传 递 任意 文本 串 给 loadingText 选 项 : 

$.dialog('login.html',{ 


loadingText: “请 稍 候 ……: 
}); 


假设 login.html 是 一 张 完整 的 网 页 ， 包 括 html、head 和 body 元 素 ， 并 引用 了 一 些 JavaScript 和 
CSS 文 件 ， 这 时 你 很 可 能 只 想 让 网 页 内 容 的 一 个 子 集 出 现在 对 话 框 里 。dialog 工 具 函 数 让 这 一 切 
变 得 简单 : 只 需 在 URL 路 径 后 添加 一 个 空格 ， 然 后 附 上 你 想 要 的 所 有 jQuery 选择 器 即 可 。 举 个 例 
子 ， 下 面 的 脚本 会 用 login.html 页 中 某 个 id 为 1ogin 的 div 里 的 内 容 创建 一 个 对 话 框 : 

$.dialog('login.html #Login' ); 

可 以 使 用 这 种 方法 轻松 制作 出 本 章 描 述 的 范例 ， 具 体 做 法 是 给 “登录 ”链接 绑 定 一 个 click 
事件 ， 让 它 基于 链接 href 属 性 引用 的 网 页 生成 一 个 对 话 框 : 


// 给 登录 链接 指定 click 事 件 
$('#o0ption-login').click(function(){ 
// 用 链接 href 属 性 所 引用 网 页 里 的 #]ogin div 创 建 对 话 框 





























$.dialog( $(this).attr('href') +' #1login' ); 
// 防 止 浏览 器 刷新 
return false; 


}); 

dialog 工 具 插 件 还 可 以 设置 一 个 options 参 数 ， 后 者 接受 刚才 介绍 的 所 有 可 配置 对 话 框 选项 
( 即 title、buttons 和 focus )， 以 及 一 个 额外 的 complete 选 项 。complete 选 项 接受 一 个 回调 函数 ， 
此 函数 会 在 Ajax 响应 返回 并 填 人 对 话 框 内 容 后 执行 。 向 complete 函 数 传递 一 个 变量 参数 ， 就 能 引 
用 Ajax 响应 的 HIML， 然 后 可 以 进一步 修改 它 ， 比 如 给 对 话 框 里 的 标记 添加 事件 。 下 面 的 例子 扩 
展 了 之 前 的 脚本 , 它 所 指定 的 complete 回 调 函 数 会 挖掘 响应 内 容 以 寻找 “忘记 了 你 的 密码 ”链接 ， 
然后 绑 定 一 个 点 击 事件 来 请 求 它 的 内 容 ， 用 于 一 个 新 的 对 话 框 : 


// 给 登录 链接 指定 click 事件 
$('#o0ption-login').click(function(){ 
// 用 链接 href 属 性 所 引用 网 页 里 的 #1ogin div 创 建 对 话 框 
$.dialog( $(this).attr('href')+' #login', { 

















// 指 定 CompJete 回 调 函 数 ， 用 响应 作为 参数 
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complete: function(response){ 


// 找 到 忘记 密码 链接 ， 绑 定 Click 事 件 
response.find('a.alt-option').click(function(){ 
// 用 链接 href 属 性 所 引用 网 页 里 的 #forgot div 创 建 对 话 框 


$.dialog($(this).attr('href')+' #forgot'); 
// 防 止 浏览 器 刷新 
return false; 


}); 


} 
}); 
// 防 止 浏览 器 刷新 
return false; 


}); 








创建 可 访问 的 对 话 框 和 全 加 层 十 分 容易 , 前提 是 你 要 记得 加 入 恰当 的 ARIA 属 性 并 管理 焦点 ， 
以 确保 能 正确 支持 键盘 。 这 里 列举 的 基本 编码 原则 同样 适用 于 各 种 各 样 的 不 同 组 件 , 从 照片 灯箱 


钱 加 层 ， 到 可 拖 动 和 缩放 的 面板 、 检 查 带 以 及 调 色 板 不 等 。 











按钮 (button ) 在 网 站 和 应 用 程序 界面 里 无 处 不 在 〈 用 来 提交 数据 和 在 工具 栏 、 表 单 和 导航 
控件 里 发 起 操作 )， 设 计 师 们 经 常会 定制 它们 的 外 观 。 通 常情 况 下 ， 我 们 为 项 目 设 计 自 定义 样式 
按钮 的 原因 是 按钮 必须 : 

> 匹配 整个 网 站 或 应 用 程序 的 品牌 风格 和 表现 方式 ; 

> 使 用 颜色 、 纹 理 和 尺寸 来 传达 按钮 层级 ， 例 如 从 视觉 上 区 分 首要 和 次 要 操作 ; 

> 通过 加 入 图 标 使 它们 更 具有 独特 的 可 识别 性 ， 更 易于 浏览 ， 或 者 干脆 是 紧凑 的 纯 图 标 按 

钮 ， 就 像 文本 编辑 工具 栏 里 使 用 的 那些 ; 

> 引入 自 定义 的 交互 状态 来 提供 更 好 的 反馈 ， 比 如 触摸 屏 上 按钮 的 按 下 状态 。 

只 需 加 一 点 CSS 和 JavaScript， 几 乎 所 有 的 HTML 元素 就 都 能 具备 按钮 的 外 观 和 行为 : 举 个 例 
子 , 谷歌 公司 的 Gmail 网 页 应 用 程序 在 界面 里 到 处 使 用 基于 div 的 按钮 。 但 是 , 依靠 JavaScript 事 件 
来 处 理 表单 提交 是 有 风险 的 , 脚本 功能 被 禁用 或 不 被 完全 支持 时 ,所 有 相关 功能 就 会 变 得 不 可 用 。 

为 了 编写 能 在 所 有 地 方 可 靠 工作 的 基础 标记 ， 需 要 从 type 为 button 的 input 元 素 或 者 button 
元 素 起 步 。 选 择 哪 一 种 元 素 要 根据 特定 情形 下 的 样式 和 功能 需求 而 定 。 

这 一 章 会 分 步骤 实现 两 种 目标 设计 ， 讨 论 在 基础 标记 里 选择 使 用 input 或 button 元 素 的 判断 
标准 ， 然 后 分 析 如 何在 增强 体验 里 把 它们 转变 成 格式 丰富 的 按钮 。 




































































14.1 X 光 透视 


假设 有 一 个 社交 网 站 , 里 面 的 某 张 网 页 列 出 了 好 友 邀 请 , 用 户 可 以 接受 或 忽略 它们 。 我 们 的 
设计 为 这 些 按钮 引入 了 视觉 层级 ,强调 了 积极 的 “添加 好 友 ”( Add Friend ) 操作 ， 而 不 是 消极 的 
忽略 操作 。 考 虑 两 种 可 能 的 目标 设计 ,它们 列举 了 一 些 关键 要 素 , 能 帮助 我 们 决定 该 使 用 哪 种 原 
生 元 素 : 第 一 种 设计 比较 简单 ， 它 给 两 个 按钮 添加 了 差别 化 的 样式 ， 显示 出 强调 程度 的 不 同 ,如 
图 14-1 所 示 。 

男 一 种 设计 更 复杂 一 些 ， 它 需要 给 每 个 按钮 内 置 一 个 图 标 ， 同 时 使 用 混合 字形 的 文本 格 
式 一 一 “添加 约翰 ”( Add John ) 是 粗 体 ， 如 图 14-2 所 示 。 

可 以 使 用 两 种 原生 元 素来 编写 自 定义 按钮 的 基础 标记 : 一 种 是 type 属 性 设置 为 supmit、 reset 
或 image 的 input 元 素 ， 男 一 种 是 button 元 素 。 在 这 两 种 标记 选择 中 ，input 元 素 在 HTMIL 规 范 里 存 
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在 的 时 间 比 button 长 ( 1996 年 左右 的 HTML3 规 范 收 录 了 input， 相 比 之 下 button 则 是 在 1999 年 年 
未 的 HTML4 规 范 里 才 被 加 入 )， 而 且 它 往往 能 在 范围 更 广 的 旧版 和 移动 浏览 器 里 正确 工作 。 因 为 
它 的 普遍 可 用 性 ， 所 以 input 是 在 基础 标记 里 创建 按钮 的 首选 。 








Friend request from john Smith 


Boston MA - 16 friends in common with you 


Add john as a friend | lgnore | 


图 14-1 目标 按钮 设计 带 有 一 种 区 分 主要 和 次 要 按钮 的 视觉 样式 




















Friend request from John Smith 
Boston MA - 16 friends in common with you 


ww Add John as a friernd 更 |gnore | 


图 14-2” 带 有 复杂 按钮 格式 的 目标 设计 

某 个 设计 需要 用 到 带 有 样式 的 按钮 时 ， 设 计 师 通常 会 避免 使 用 基于 input 的 标准 按钮 。 一 种 
常见 的 误解 是 input 不 能 用 CSS 可 靠 地 添加 样式 。 我 们 测试 了 这 个 说 法 , 惊奇 地 发 现 可 以 在 所 有 主 
流 浏览 器 (甚至 是 Internet Explorer 5 ) 上 让 基于 ;input 的 按钮 具备 一 致 的 样式 , 包括 各 种 字体 样式 、 
背景 图 像 、 边 框 、 圆 化 的 边 角 、 自 定义 尺寸 、 外 边 距 和 内 边 距 。 

但 是 ，input 存 在 一 个 关键 的 限制 : 这 个 元 素 由 一 个 单独 的 自 关闭 标签 组 成 ， 因 此 它 无 法 容 
纳 别 的 HITML 元 素 , 比如 图 像 、span、em、strong 或 其 他 任何 HTML 标 签 。 这 就 阻碍 了 我 们 把 input 
用 于 复杂 文本 格式 ， 层 受 多 张 背景 圆 像 ， 或 者 添加 多 个 图 标 。 

相 比 之 下 ，button 元 素 则 拥有 开始 和 关闭 标签 ， 能 够 容纳 额外 的 HTML 元 素 。 这 样 我 们 就 有 
地 方 存放 复杂 目标 设计 里 的 所 有 设计 特性 : 可 以 用 一 个 strong 标 签 围 住 “ 添 加 约 萌 ”来 实现 强调 ， 
然后 添加 一 个 span 标 签 来 应 用 图 标 。 但 是 ，button 有 它 自 己 的 缺点 : 因为 它 在 最 早 的 HTML 规范 
中 不 存在 ,所 以 一 些 老式 浏览 需 和 移动 平台 不 能 识别 它 ， 从 而 导致 按钮 完全 无 法 显示 ， 或 者 不 能 
在 点 击 按钮 后 正确 提交 表单 。 

因此 ， 建 议 基础 按钮 标记 总 是 使 用 input， 只 有 在 增强 体验 里 才 使 用 button 元 素 。 对 于 更 简 
单 的 第 一 种 设计 ， 我 们 会 在 增强 体验 里 给 input 添 加 样式 ， 就 像 对 其 他 任何 元 素 所 做 的 一 样 ; 对 
于 带 有 格式 化 文本 和 图 标的 复杂 设计 ， 把 input“ 转 换 ” 成 一 个 button 来 实现 高 级 格式 ， 同 时 保 
留 原 生 提 交 表 单数 据 的 能 

首先 , 分 析 如 何 给 基于 input 的 按钮 添加 样式 。 然后 , 分 步 介 绍 如 何在 增强 体验 里 把 input“ 转 
换 ” 成 一 个 button 元 素 ， 以 容纳 第 二 个 例子 里 的 额外 图 标 和 文本 格式 。 
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14.2 ”给 基于 input 的 按钮 添加 样式 


我 们 会 用 基于 input 的 按钮 构建 第 一 种 设计 ， 同 时 在 基本 体验 和 增强 体验 里 用 CSS 给 它 添加 
样式 。 该 设计 ( 如 图 14-1 所 示 ) 足够 简单 ， 因 此 这 一 方法 在 各 种 各 样 的 浏览 器 里 都 可 行 。 

为 了 让 主要 和 次 要 按钮 之 间 存 在 一 种 视觉 层级 , 在 基础 标记 里 给 input 元 素 的 标记 做 出 区 分 ， 
方法 是 指派 描述 性 的 类 ( btn-primary 和 btn-secondary )。 为 了 安全 起 见 ， 我 们 会 把 不 少 视觉 样式 
(比如 “添加 ”按钮 上 的 深 色 背景 浅 色 文字 ) 留 给 增强 体验 ， 因 为 旧版 的 浏览 器 可 能 只 支持 文字 
颜色 样式 〈 而 不 支持 背景 图 像 或 者 颜色 )， 这 可 能 会 导致 文字 不 可 阅读 。 

但 是 ， 可 以 在 基本 体验 里 显示 出 视觉 重点 ， 方 法 是 将 主要 按钮 的 font-weight 设 置 为 粗 体 。 
(虽然 这 个 样式 属性 一 般 都 能 得 到 良好 支持 ， 但 是 有 些 浏览 器 可 能 会 忽略 它 ， 因 为 它 应 用 在 一 个 
input 上 。) 即使 在 非常 原始 的 浏览 器 上 , 我们 给 主要 操作 和 替代 操作 所 加 的 提示 也 能 在 基本 体验 
里 传达 出 来 ( 如 图 14-2 所 示 )。 


14.2.1 ”基础 标记 和 样式 


我 们 这 个 社交 网 站 的 基础 标记 始 于 一 个 form 标 签 。 表 单 里 有 一 个 fieldset, 它 包含 了 一 个 legend， 
一 个 显示 地 点 和 共同 好 友 数 量 的 段落 ， 以 及 两 个 用 于 添加 和 忽略 好 友 请 求 的 提交 ;input 元 素 : 


<form action="friendForm.php"> 
<fieldset> 
<legend>Friend request from John Smith</legend> 
<p>Boston MA - 16 friends in common with you</p> 
<input type="submit" name="add" value="Add John as a friend”/> 
<input type="submit”name="ignore”value="Ignore”/> 
</fieldset> 
</form> 


我 们 会 给 每 一 个 input 元 素 都 添加 一 个 类 ， 标 明 它 的 角色 是 主要 还 是 次 要 : 


<input type="submit" name="add" value="Add John as a friend" 
class="btn-primary" /> 









































<input type="submit" name="ignore" value="Ignore" class="btn-secondary" /> 
我 们 的 基础 标记 现在 已 经 能 为 所 有 支持 基本 HTML 的 设备 提供 一 种 可 用 的 体验 了 ， 如 图 14-3 
所 示 。 





Friend request from John Snuth 


Boston MA - 16 friends in common with you 
Add Johnasainend 


图 14-3 不 带 样式 的 基础 标记 
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这 张 表单 完美 可 用 ,但 可 以 做 一 些 视觉 上 的 打磨 , 因此 给 基本 样式 表 添 加 一 些 安 全 CSS 规 则 。 
font-family 样 式 属性 对 外 观感 受 有 着 巨大 影响 。 网 页 上 的 大 多 数 元 素 从 它们 的 父 元 素 那 里 
继承 font-family 属 性 ， 但 表单 控件 通常 是 个 例外 。 许 多 浏览 器 会 为 表单 控件 指定 某 种 等 宽 字 体 ， 
忽略 网 页 上 设置 的 其 他 字体 样式 。 为 了 修复 这 个 问题 , 把 font-family 规 则 指向 body 和 input 元 素 : 
body, input { font-family: "Segoe UI", Arial, sans-serif; } 


这 条 简单 的 规则 已 经 让 表单 变 得 好 看 多 了 ! 效果 如 图 14-4 所 示 。 

















Friend request from John Smith 


Boston MA - 16 friends in common with you 


Add John as a fhend lgnore 


图 14-4 应 用 了 字体 样式 的 基础 标记 


为 了 提高 表单 的 易 读 性 ， 我 们 会 移 除 fieldset 的 边框 ， 调 整 它 的 外 边 距 ， 把 legend 的 样式 设 
成 粗 体 和 绿色 ， 并 调整 里 面 段 落 的 外 边 距 : 


fieldset { 
margin-top: 1.2em; 
margin-bottom: 1.2em; 
border: 0; 


} 

















legend { 
color: #339900; 
font-weight: bold; 
} 


fieldset p { 
margin: 0 0 1.2em; 








现在 ， 基 本 体验 里 的 表单 块 看 上 去 更 接近 我 们 的 目标 设计 了 ， 如 图 14-5 所 示 。 





Friend request from John Smith 


Boston MA - 16 friends in common with you 


Add John as a ffiend lgngre 
图 14-5 应 用 了 fieldset 、legend 和 段落 样式 的 基础 标记 


最 后 , 给 主要 按钮 添加 粗 体 文本 样式 , 并 指定 次 要 按钮 的 文本 应 该 是 普通 文本 (不 是 粗 体 )， 
以 确保 基本 体验 里 存在 视觉 重点 的 变化 : 
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.btn-primary { font-weight: bold; } 
.btn-secondary { font-weight: normal; } 


这 些 样式 就 位 后 , “添加 ”按钮 就 有 了 视觉 上 的 优先 性 ， 如 图 14-6 所 示 。 








Friend request from John Smith 


Boston MA -16 friends in common with you 


Add John asafriend 
图 14-6 “基础 标记 里 的 主要 按钮 带 有 粗 体 文字 ， 用 于 突出 视觉 重点 


完成 基础 标记 和 样式 之 后 , 我 们 将 要 处 理 增强 标记 和 样式 , 它们 会 在 浏览 器 通过 能 力 测 试 时 
应 用 到 网 页 上 。 




















14.2.2 ”增强 标记 和 样式 


在 我 们 的 目标 设计 里 , 两 个 按钮 具备 许多 相同 的 样式 , 因此 在 增强 样式 表 里 为 这 两 个 按钮 选 
择 带 编写 同一 条 规则 ， 以 应 用 这 些 共享 的 样式 。 这 些 规则 定义 了 内 边 距 、 字 体格 式 和 对 齐 方式 ， 
并 把 input 上 的 光标 样式 设 为 可 点 击 的 手 形 图 标 : 


.btn-primary, 

.btn-secondary { 
padding: .4em 1em; 
border: 1px solid #aaa; 
background-color: #eee; 
text-align: center; 
cursor: pointer; 
font-size: 1.2em; 


注意 这些 按钮 的 字体 粗细 会 继承 之 前 写 入 基本 样式 表 的 主要 和 次 要 按钮 类 ， 所 以 不 需要 在 增 
强 样式 表 里 再 次 定义 它们 ， 如 图 14-7 所 示 。 





Add John as a friend Ignore 








图 14-7 应 用 了 共同 样式 的 input 元 素 


提示 设置 按钮 样式 时 ， 要 为 内 边 距 和 外 边 距 这 类 属性 使 用 em 单位 ， 而 不 是 像素 ， 以 确保 按钮 
(和 它 占据 的 空间 ) 会 根据 字体 的 大 小 伸展 和 收缩 。 
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老 版 本 的 Internet Explorer 会 给 input 和 button 元 素 增加 额外 的 宽度 ， 而 且 不 能 用 padding 或 
margin 的 值 来 改变 , 不 过 有 一 种 方法 可 以 修复 这 个 问题 : 指定 一 个 width 属性 ,并 将 overflow 属 性 
设 为 visible。 如 果 按 钮 不 要 求 有 具体 的 width， 可 以 将 它 的 值 设 为 auto: 


.btn-primary, 
.btn-secondary { 
padding: .4em 1em; 
border: 1px solid #aaa; 
background-color: #eee; 
text-align: center; 
cursor: pointer; 
font-size: 1.2em; 
width: auto; 
overflow: visible; 























为 了 圆 化 按钮 的 边 角 ， 应 用 CSS3 的 border-radius 属 性 ， 如 图 14-8 所 示 。 写 作 本 书 时 ， 只 有 
基于 Mozilla 和 Webkit 的 浏览 器 支持 border-radius 属 性 (通过 使 用 各 自 专 用 的 属性 名 )， 但 是 使 用 
它 仍然 是 安全 的 , 因为 不 支持 这 个 属性 的 浏览 器 会 显示 方 角 按钮 。 我 们 还 会 加 上 W3C 规 定 的 标准 
border-radius 属 性 ， 这 样 的话 ， 未 来 实现 了 这 一 特性 的 浏览 器 也 能 够 显示 出 圆 角 ( 写作 本 书 时 ， 
Opera 和 Internet Explorer 都 已 致力 于 支持 这 个 属性 ?”): 


.btn-primary, 
.btn-secondary { 
padding: .4em 1em; 
border: 1px solid #aaa; 
background-color: #eee; 
text-align: center; 
cursor: pointer; 
font-size: 1.2em; 
width: auto; 
overflow: visible; 
-moz-border-radius: 7px; 
-webkit-border-radius: 7px; 
border-radius: 7px; 


| Ea 


Add john as a friend lgnore 






































图 14-8 ” 带 圆 角 的 基本 按钮 样式 


基本 样式 里 的 主要 和 次 要 按钮 类 指定 了 背景 图 像 (分 别 是 绿色 和 银色 )， 以 及 匹配 目标 设计 
的 文本 和 边框 颜色 : 


.btn-primary { 
background: #459e00 url(../images/button-green.gif) no-repeat left center; 
color: #fff; 























@ Opera 10.5、IE 9、Safari 5、Chrome 、Firefox 4、iOS 4 和 Android 2.1 都 已 经 支持 标准 的 border-radius 属 性 。 
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border-color: #2d7406; 


} 


.btn-secondary { 
background: #e7e8e9 url(../images/button-silver.gif) no-repeat left center; 
color: #555; 
border-color: #b3b3b3; 

} 


为 使 文字 在 背景 图 像 里 显得 突出 ,用 text-shadow 属 性 给 按钮 文字 添加 了 阴影 ,如 图 14-9 所 示 。 
像 border-radius 属 性 一 样 ， 写 作 本 书 时 只 有 少数 几 种 浏览 器 能 支持 text-shadow ( 具体 来 说 是 
Firefox 3.5+、Safari 1.1+ 和 Opera 9.5+ )， 不 过 加 入 这 个 属性 是 无 害 的 ， 只 要 文字 在 没有 阴影 时 有 
良好 的 对 比 度 就 行 。 
.btn-primary { 
background: #459e00 url(../images/button-green.gif) no-repeat left center; 
color: #eee; 
border-color: #2d7406; 
text-shadow: -1px -1px 0 #37730e; 


} 




















.btn-secondary { 
background: #e7e8e9 url(../images/button-silver.gif) no-repeat left center; 
color: #555; 
border-color: #b3b3b3; 
text-shadow: 1px 1px 0 #fafafa; 


} 
| lgnore 


图 14-9 ”应 用 按钮 样式 后 


为 了 在 用 户 和 按钮 交互 时 提供 良好 的 视觉 反馈 , 为 每 种 按钮 类 型 各 定义 了 一 个 莽 停 状态 ,如 
图 14-10 所 示 。 理 想 情况 下 ， 使 用 :hover 伪 类 ， 但 是 Internet Explorer 6 和 之 前 的 版 本 只 在 销 元 素 (a) 
上 支持 这 个 伪 类 。 为 了 解决 这 个 问题 ， 当 用 户 将 光标 移 上 和 移 开 按钮 时 , 分别 用 JavaScript 添 加 和 
移 除 一 个 基 停 类 : 
.btn-primary-hover { 
background-color: #57AF00; 
background-position: right center; 


color: #fff; 
border-color: #205b00; 


} 
































.btn-secondary-hover { 
background-color: #F1F1F2; 
background-position: right center; 
color: #333; 
border-color: #777; 

} 
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Add John as a friend | lgnore | 


14-10 ”次 要 按钮 的 悬 停 状态 





使 用 组 合 图 像 (image sprites) 
为 了 减少 服务 器 请 求 的 数量 ， 把 主要 和 次 要 按钮 的 默认 及 是 停 背 景 图 共同 放 进 一 张 组 合 
图 像 里 。 组 合 图 像 是 一 个 单独 的 图 像 文 件 ， 内 含 多 张 背 景 图 。 可 以 使 用 CSS 的 
background-position 属 性 来 确定 它 的 位 置 ， 以 显示 出 合适 的 背景 图 。 
按钮 的 默认 状态 在 左边 ， 是 浮 状态 在 右边 ， 因 此 可 以 在 样式 表 里 简单 地 把 每 一 种 状态 的 
背景 位 置 从 左 换 到 右 。 这 张 组 合 图 像 有 1000 像 素 宽 ( 一半 是 默认 状态 ,一 半 是 是 停 状 态 )， 因 
此 按钮 最 多 可 以 有 500 像 素 宽 ， 如 图 14-11 所 示 。 


图 14-11 主要 和 次 要 按钮 的 背景 组 合 图 像 


最 后 ， 我 们 会 给 legend 和 段落 添加 字体 大 小 的 样式 规则 ， 为 它们 创建 出 合适 的 视觉 比重 : 


legend { font-size:1.5em; } 
fieldset p { font-size:1.3em; } 


应 用 这 些 样 式 后 ， 增 强 标 记 看 上 去 就 和 我 们 的 目标 设计 一 模 一 样 了 ， 如 图 14-12 所 示 。 





Friend request from John Smith 
Boston MA - 16 friends in common with you 


Add john as a friend , lgnore 


图 14-12 最终 的 增强 样式 











14.2.3” 悬 停 状态 增强 脚本 
基于 input 的 按钮 几乎 不 需要 编写 脚本 : 当 用 户 把 光标 放 在 某 个 按钮 上 时 ,我 们 会 用 JavaScript 
给 按钮 应 用 hover 类 。 这 种 方法 确保 了 任何 通过 能 力 测试 的 浏览 器 都 能 显示 出 正确 的 悬 停 状 态 


反馈 。 
首先 ， 创 建 两 个 变量 来 捕 换 input 元素 ， 它 们 分 别 对 应 网 页 上 所 有 的 主要 和 次 要 按钮 : 
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// 找 到 所 有 带 有 主要 和 次 要 按钮 类 的 ijnput 元 素 
var primaryButtons = $('input.btn-primary'); 
var secondaryButtons = $('input.btn-secondary'); 


然后 添加 hover 类 , 方法 是 绑 定 一 个 函数 到 input 的 mouseover 事 件 ， 并 用 mouseout 事 件 来 移 除 
这 个 类 。 为 方便 起 见 ，jQuery 提 供 了 一 个 hover 方 法 ， 可 同时 传递 用 于 mouseover 和 mouseout 事 件 
的 函数 。 下 面 的 例子 展示 了 如 何 给 主要 按钮 应 用 这 种 悬 停 状 态 切换 方法 : 
// 应 用 hover 方 法 
primaryButtons.hover( 
// 第 一 个 济 数 参数 会 应 用 到 mouseover 事 件 


function(){ 
$(this).addClass('btn-primary-hover' ); 








}), 

// 第 二 个 函数 参数 会 应 用 到 mouseout 事 件 

function(){ 
$(this).removeClass('btn-primary-hover' ); 


)， 
); 


对 于 次 要 按钮 , 构建 一 个 类 似 的 hover 方 法 作用 于 secondaryButtons 变 量 , 并 用 这 个 方法 切换 
btn-secondary-hover 类 的 开启 和 关闭 。 

现在 ，input 按 钮 支持 了 开头 的 目标 设计 中 指定 的 行为 和 视觉 外 观 。 接 下 来 ， 分 析 如 何 将 带 
有 更 复杂 视觉 格式 的 按钮 从 input 转 变 成 增强 体验 里 的 button。 


14.3 ”创建 带 有 复杂 视觉 格式 的 按钮 


我 们 的 第 二 个 目标 设计 建立 在 第 一 个 例子 的 基础 之 上 ， 并 带 有 两 个 额外 的 特性 :“ 添 加 ”和 
“忽略 ”( Ignore ) 操作 按钮 的 图 标 ， 以 及 用 字体 粗细 的 差异 来 强调 主要 按钮 里 的 部 分 文字 ， 如 图 
14-13 所 示 。 














Friend request from John Smith 


Boston MA - 16 friends in common with you 


此 Add John'as a friend 殉 lgnore | 


图 14-13 ” 带 有 复杂 按钮 格式 的 目标 设计 


在 这 个 案例 里 , 无 法 让 input 元 素 的 样式 匹配 目标 设计 ， 因 此 只 会 在 基础 标记 里 使 用 input 元 
素 ， 因 为 我 们 知道 它 能 可 靠 地 在 所 有 浏览 器 和 设备 上 工作 。 在 增强 体验 里 ， 则 会 运行 一 个 脚本 ， 
通过 将 input 蔡 换 成 一 个 带 有 样式 的 button 元 素 ， 提 供 更 为 丰富 的 体验 。 

用 button 替 换 input 元 素 时 ， 把 input 元 素 的 所 有 属性 和 JavaScript 事 件 复 制 到 button 上 ， 以 确 
保 新 老 元 素 一 一 对 应 。 新 的 button 会 完全 取代 input 元 素 的 所 有 功能 ， 因 此 当 脚 本 运行 完毕 后 ， 
会 从 页 面 里 彻底 移 除 input。 
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14.3.1 基础 标记 和 样式 


像 第 一 个 例子 一 样 ， 从 :input 元 素 起 步 并 指派 主要 和 次 要 按钮 类 ， 不 过 我 们 会 额外 给 每 个 
input 添 加 一 个 类 来 标明 各 个 按钮 的 用 途 ( action-add 和 action-ignore )。 这 些 类 会 传递 给 增强 体 
验 里 的 button， 用 来 给 按钮 应 用 特定 的 图 标 : 


<input type="submit" name="add" value="Add John as a friend" class="btn- 
primary action-add" /> 

<input type="submit" name="ignore" value="Ignore" class="btn-secondary 
action-ignore” /> 


为 了 标明 某 些 按钮 文字 应 该 带 有 粗 体 样式 , 使 用 一 个 HTML 字 符 来 作为 定 界 符 。 脚 本 会 寻找 
这 个 定 界 符 , 然后 给 它 前 面 的 文字 应 用 粗 体 样式 .好 的 定 界 符 通 常 是 一 些 标点 符号 或 者 特殊 字符 ， 
它们 能 合情合理 地 显示 在 基本 体验 里 ， 而 且 足 够 独特 ， 能 被 脚本 探测 到 。 对 这 个 按钮 来 说 ,没有 
哪 种 可 见 字符 能 朗读 正确 ， 所 以 定 界 符 的 最 佳 选择 是 一 个 不 间断 的 空格 ( &nbsp; )， 它 在 基本 体 
验 里 不 可 见 : 


<input type="submit" name="add" value="Add John&nbsp;as a friend" 
class="btn-primary action-add" /> 








<input type="submit" name="ignore" value="Ignore" class="btn-secondary 
action-ignore" /> 


我 们 为 第 一 个 例子 创建 的 基本 样式 在 这 里 也 适用 ,只 有 一 处 需要 稍 作 修 改 : 把 button 添 加 到 
font-family 选 择 右 里 ， 让 它 能 继承 正确 的 字体 样式 : 

body, input, button { font-family: "Segoe UI", Arial, sans-serif; } 

基础 标记 和 基本 样式 到 位 后 , 下 面 来 处 理 浏 览 需 通 过 能 力 测 试 时 应 用 到 网 页 上 的 增强 标记 和 








14.3.2 ”增强 标记 和 样式 


当 浏 览 器 通过 能 力 测 试 时 , 用 JavaScript 把 各 个 input 蔡 换 成 拥有 相同 属性 和 JavaScript 事 件 的 
button 元 素 : 





<button type="submit" name="add" value="Add John as a Friend" class= 
"btn-primary action-add">Add John&nbsp;as a Friend</button> 


<button type="submit" name="ignore" value="Ignore" class="btn-secondary 
action-ignore">Ignore</button> 


增强 脚本 会 移 除 之 前 插入 到 基础 标记 里 的 定 界 符 ( 即 一 个 不 间断 的 空格 : &nbsp; )， 然 后 把 
它 前 面 的 文字 用 一 个 strong 元 素 围 起 来 : 


<button type="submit" name="add" value="Add John as a Friend" class="btn- 
primary action-add"><strong>Add John</strong> as a Friend</button> 
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为 了 应 用 图 标 ， 脚 本 会 在 标记 里 插入 一 个 class 为 icon 的 span 元 素 , 位置 是 在 button 文 字 的 
前 面 : 


<button type="submit" name="add" value="Add John as a Friend" class= 
"btn-primary action-add"><span class="icon"></span><strong>Add John 
</strong> as a Friend</button> 


和 在 基本 CSS 上 的 做 法 一 样 , 把 之 前 构建 用 来 给 input 添 加 样式 的 增强 CSS 作 为 基础 , 为 增强 
的 button 元 素 指 定 所 需 样式 。 

在 目标 设计 里 ， 主 要 按钮 上 的 一 部 分 文字 是 粗 体 ， 其 余部 分 则 是 正常 的 字形 。btn-primary 
类 给 所 有 的 主要 按钮 应 用 了 粗 体 font-weight 属 性 ， 所 以 需要 让 这 个 特殊 的 主要 按钮 成 为 一 个 例 
外 。 为 action-add 类 编写 一 条 新 的 样式 规则 ， 专 门面 向 目标 设计 里 的 主要 按钮 ， 这 样 网 页 里 的 其 
他 主要 按钮 就 仍然 是 粗 体 的 : 

button.action-add { font-weight: normal; } 

这 个 “input 转 putton” 的 脚本 会 用 strong 标 签 包 围 强调 的 文字 : 添加 约翰 。 默 认 情 况 下 ， 
大 多 数 浏览 器 会 给 strong 元 素 应 用 一 种 加 粗 的 字体 样式 ， 不 过 为 了 确保 格式 应 用 正确 , 用 一 条 简 
单 的 规则 巩固 这 个 样式 : 

button strong { font-weight: bold; } 

我 们 还 会 给 图 标的 span 添 加 样式 ， 对 它们 应 用 inline-block 属 性 和 尺寸: 


button span.icon { 
display: inline-block; 
height: 12px; 
margin-right: 5px; 
width: 16px; 

} 


最 后 ， 为 每 个 图 标 span 都 设置 一 张 背景 图 像 ， 具 体 根据 它们 父 元 素 的 类 而 定 : 


.action-add span.icon { 
background: url(../images/icon-add.png) 0 0 no-repeat; 





























.action-ignore span.icon { 
background: url(../images/icon-ignore.png) 0 0 no-repeat; 


} 
我 们 的 CSS 现 在 已 经 支持 了 复杂 按钮 格式 ， 接 下 来 编写 脚本 ， 实 现 input 到 button 的 转换 。 





14.3.3 ”input 转 button 增 强 脚 本 

我 们 的 目标 是 在 浏览 需 通 过 能 力 测试 时 蔡 换 基础 标记 里 的 特定 input 元 素 ， 用 自 定 义 样 式 的 
button 元 素 代替 。 首 先 ， 创 建 一 个 puttoninputs 变 量 来 存放 一 个 引用 数组 ， 里 面 引 用 的 是 网 页 里 
所 有 类 似 button 的 input 元 素 : 

var buttoninputs = $('input.btn-primary, input.btn-secondary'); 


用 jQuery 的 each 方 法 遍历 数组 里 的 各 项 ， 把 它们 替换 成 一 个 新 的 button 元 素 ， 还 包括 这 些 
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input 元 素 的 所 有 属性 和 绑 定 事件 。each 方 法 接受 一 个 函数 作为 参数 , 用 于 对 buttoninputs 数 组 里 
的 各 项 执行 : 

buttoninputs.each(function(){ 

D; 

在 这 个 函数 里 ， 我 们 会 编写 逻辑 代码 来 获取 ;input 的 所 有 属性 和 事件 ， 把 它们 指派 给 新 的 
button 元 素 ， 然 后 替换 input。 

首先 ， 创 建 一 个 变量 来 充当 button 标 记 的 模板 角色 ， 并 将 input 元 素 的 值 用 于 button 元 素 的 
文本 标签 : 


buttoninputs.each(function(){ 
var button = $('<button>'+ $(this).val() +'</button>'); 
}); 

















注意 在 传递 给 each 方 法 的 函数 里 ，this 关 键 词 指 的 是 当前 的 ijnput 元 素 。 通 过 把 this 放 在 一 对 
括号 里 并 添加 一 个 美元 符号 前 级 ， 把 它 转 变 成 了 一 个 jQuery 对 象 引用 ， 这 样 就 可 以 对 它 
应 用 jQuery 方法 来 操作 该 元 素 。 举 个 例子 ，$(this).val(); 这 条 语句 会 返回 input 的 值 。 


接 下 来 ， 获 取 input 元 素 的 所 有 属性 名 / 值 对 ( 技术 上 来 说 是 nodeName 和 nodeValue )， 然 后 用 
setAttribute 方 法 把 它们 应 用 到 新 的 button 上 : 


buttoninputs.each(function(){ 
var button = $('<button>'+ $(this).val() +'<¢/button>'); 
$.each(this.attributes, function(){ 
button[0].setAttribute(this.nodeName, this.nodeValue); 
]); 
]); 


注意 ”写作 本 书 时 , 用 jQuery 的 attr 方 法 在 Internet Explorer 8 里 设置 type 属 性 时 会 产生 一 个 错误 。 
为 了 避免 与 Internet Explorer 冲 突 , 我 们 使 用 了 JavaScript 原 生 的 setAttribute 方 法 , 而 不 是 
jQuery 的 attr 快 捷 方法 。 就 像 所 有 的 JavaScript 原 生 属 性 一 样 ，setAttribute 必 须 使 用 数组 
标号 来 引用 button 变 量 ， 即 button[0]。 





现在 我 们 已 经 把 input 元 素 的 属性 重新 指派 给 了 button， 下 面 对 input 元 素 绑 定 的 所 有 
JavaScript 事 件 执行 同样 的 操作 。 用 jQuery 绑 定 的 事件 通过 data 方 法 保存 在 内 存 中 ， 这 个 方法 既 能 
获取 数据 ,也 能 设置 数据 。 向 data 方 法 传递 一 个 参数 ( 在 这 个 案例 是 events ) 来 获取 绑 定 在 input 
上 的 所 有 事件 。 又 因为 每 个 事件 ( 比如 onload 和 onclick ) 都 可 以 关联 多 个 绑 定 (或 者 说 函数 )， 
所 以 我 们 还 会 遍历 这 些 绑 定 来 确保 一 个 不 漏 : 

buttoninputs.each(function(){ 

var button = $('<button>'+ $(this).val() +'<¢/button>'); 
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$.each(this.attributes, function(){ 
button[0].setAttribute(this.nodeName, this.nodeValue); 

}); 

if ($(this).data('events')) { 

$.each($(this).data('events'), 
function(eventname, bindings){ 
$.each(bindings, function(){ 
button.bind(eventname, this); 


)); 











此 时 ,用 原来 的 input 元 素 属性 和 事件 创建 了 自 定义 按钮 ,现在 可 以 安全 地 把 input 元 素 从 标 
记 里 移 除 了 。jQuery 的 replaceWith 方 法 提供 了 一 种 干净 的 方式 ， 能 够 同时 移 除 input 元 素 和 插入 








新 的 button 元 素 : 


buttoninputs.each(function(){ 
var button = $('<button>'+ $(this).val() +'<¢/button>'); 
$.each(this.attributes, function(){ 
button[0].setAttribute(this.nodeName, this.nodeValue); 


if ($(this).data('events')) { 
$.each($(this).data('events'), 
function(eventname, bindings){ 
$.each(bindings, function(){ 
button.bind(eventname, this); 


}); 
)); 
}; 
$(this).replaceWith(button); 
}); 





现在 已 经 把 input 转 换 成 putton 元 素 了 。 接 下 来 , 添加 文本 格式 ( strong 标 签 ) 和 图 标的 span。 
重 置 action-add 按 钮 的 内 部 HTML , 方法 是 在 不 间断 空格 字符 的 位 置 拆 分 文本 , 然后 用 一 个 strong 














元 素 围 住 前 一 部 分 : 


// 获 得 对 添加 按钮 的 引用 
var addButton = $('button.action-add'); 


// 设 置 添加 按钮 的 HTML 

addButton.html( 
‘xstrong>'+addButton.html().split('&nbsp;')[0]+'</strong>'+ 
addButton.html().split('&nbsp;' )[1] 


); 








最 后 , 用 jQuery 的 prepend 方 法 给 所 有 按钮 添加 图 标 span 元 素 , 这 个 方法 会 在 元 素 的 开头 捐 
HTML: 


$('button').prepend('<span class="icon"></span>'); 


入 
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14.4 ”使 用 input 转 button 脚本 


本 书 附带 的 代码 (位 于 www.filamentgroup.com/dwpe ) 包含 一 个 jQuery 脚本 ， 它 把 本 章 展 示 
的 原则 (特别 是 第 二 个 例子 里 的 ) 包装 成 一 个 可 以 重用 的 脚本 , 方便 你 在 自己 的 项 目 里 使 用 。 要 
使 用 这 个 脚本 ， 只 需 加 入 按钮 演示 页 里 引用 的 所 有 文件 ， 然 后 调用 inputToButton 方 法 即 可 。 调 
用 的 对 象 可 以 是 任何 你 想 转换 成 button 的 input 元 素 。 

$("'input#submitForm' ) .inputToButton(); 

inputToButton 搬 件 会 自动 转移 类 和 事件 ， 并 给 按钮 应 用 悬 停 类 。 可 以 安全 地 在 一 切 input 元 
素 上 调用 inputToButton 方 法 ， 因 为 这 个 脚本 能 确保 不 转换 任何 非 按 钮 的 input 类 型 ， 比 如 text、 


radio 或 checkbox。 



































$("'input').inputToButton(); 
要 添加 图 标 span 和 用 不 间断 空格 定 界 的 文字 加 粗 〈 就 像 本 章 对 “添加 ”按钮 所 做 的 这 样 )， 
可 以 使 用 额外 的 脚本 人 逻辑 来 寻找 不 间断 空格 并 插入 图 标 span: 


$("'input').inputToButton(); 





// 在 &nbspj; 字 符 处 拆 分 文本 ， 同 时 删 掉 它 
var splitText = addButton.html().split('&nbsp;'); 


// 找 到 带 有 action-add 类 的 button， 把 它 的 内 容 替 换 为 如 下 标记 : 
// 用 一 个 strong 元 素 围 住 splitText 的 第 一 部 分 ,后面 跟着 splitText 第 二 部 分 的 文字 
$('button.action-add') 

.html('<strong>'+ splitText[0]+'¢/strong> '+ splitText[1]); 





// 给 所 有 按钮 添加 图 标 span， 放 在 文字 的 前 面 
$('button').prepend('<span class="icon"></span>'); 





14.5 ”让 按钮 更 进一步 


除了 提交 数据 之 外 , 按钮 还 经 常 被 应 用 程序 用 来 切换 设置 或 首选 项 。 切 换 按钮 通常 会 有 一 个 
额外 的 “ 按 下 ”状态 ， 让 它 看 上 去 已 被 选中 。 

切换 按钮 既 可 以 单独 作为 一 个 开启 /关闭 开关 使 用 , 也 可 以 组 成 一 组 ,每 次 只 允许 选中 一 项 。 
如 果 你 认为 这 听 上 去 像 是 另 一 种 HTML 元 素 , 那 你 就 猜 对 了 : 切换 按钮 的 行为 与 复 选 框 和 单 选 按 
钮 一 模 一 样 。 

要 详细 了 解 如 何 像 切换 按钮 那样 给 复 选 框 和 单 选 按 钮 添加 样式 , 请 参阅 第 15 章 。 本 书 附 带 的 
代码 还 包括 一 张 演示 网 页 ， 里面 的 切换 按钮 类 似 于 本 章 展 示 的 这 些 ， 参见 所 附 代码 
checkbox-radiobutton 文 件 夹 里 的 toggle-buttons.html。 
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按钮 的 使 用 和 样式 
下 面 这 些 文章 很 有 帮助 ， 指 导 我 们 自 定义 按钮 的 工作 : 
http://t.cn/hCPmr 
http://jehiah.cz/archive/button-width-in-ie 
http://t.cn/zRIYKk8P 
http://t.cn/zRIH7v6 
http:/t.cn/zRIHZY U 








自 定义 样式 的 按钮 能 传达 增强 的 视觉 复杂 性 并 改善 网 站 的 可 用 性 。 创建 你 自己 的 按钮 时 , 请 
记 住 以 下 这 些 规 则 ， 以 确保 为 所 有 人 提供 可 用 的 体验 。 

> 一 开始 要 创建 一 个 普遍 可 用 的 input 元 素 ， 并 使 用 尽 可 能 少 的 安全 样式 ， 以 确保 所 有 用 户 
都 能 访问 到 关键 功能 。 

Pp 如 果 按 钮 的 设计 比较 简单 (没有 文本 格式 或 图 标 ), 就 应 该 把 input 元 素 同 时 用 于 基本 体验 
和 增强 体验 ， 并 在 能 力 测试 通过 时 应 用 安全 样式 。 

p> 对 于 那些 较为 复杂 的 设计 ， 应 该 将 各 个 input 元 素 转换 成 button， 为 有 能 力 的 浏览 器 和 设 
备 添加 样式 和 视觉 反馈 。 

BP 用 em 设置 按钮 字体 大 小 和 内 边 距 样 式 ， 而 不 是 像素 ， 这 样 可 以 保留 文本 大 小 缩放 的 能 

> 为 了 尽量 减少 服务 器 请 求 ， 应 该 为 按钮 背景 使 用 组 合 图 像 。 要 确保 组 合 图 像 足 够 宽 ， 能 
容纳 字体 尺寸 放大 时 可 能 出 现 的 最 长 的 按钮 。 
























































复 选 框 、 单 选 按钮 和 星 级 评分 








多 亏 了 Web 标 准 和 高 级 CSS 技 巧 的 广泛 使 用 ， 现 代 Web 设 计 里 的 大 多 数 界面 组 件 现 在 都 具备 
了 自 定 义 的 外 观 和 感觉 , 它们 丰富 的 颜色 种 类 和 多 层次 的 背景 图 像 紧 密集 成 于 网 站 的 整体 视觉 样 
式 之 中 。 
然而 , 表单 里 的 复 选 框 和 单 选 按 钮 却 是 这 个 规律 奖 固 的 例外 。 它们 已 经 落伍 了 ,主要 原因 是 
只 有 少数 浏览 器 才 内 建 对 它们 应 用 CSS 样 式 的 支持 。 让 情况 更 加 复杂 的 是 ， 各 种 浏览 器 在 泻 染 复 
选 框 和 单 选 按钮 时 会 在 尺寸 、 间 距 和 外 观 上 略 有 不 同 。 
对 许多 人 , 包括 我 们 的 大 多 数 客户 来 说 , 原生 复 选 框 和 单 选 按 钮 里 国有 的 可 用 性 功能 ( 包括 
可 访问 性 、 键 盘 支 持 、 标 签 交 互 和 普遍 的 浏览 器 兼容 性 ) 已 经 足够 显著 , 让 自 定义 样式 所 带 来 的 
好 处 相形 见 纳 。 因 此 ,我 们 在 大 多 数 情况 下 一 般 会 使 用 原生 的 元 素 ， 同 时 接受 这 个 事实 : 我 们 无 
法 让 它们 的 外 观 匹 配 我 们 的 设计 系统 。 
不 过 , 我 们 遇 到 过 一 些 设计 项 目 , 它们 确实 需要 一 种 自 定义 的 设计 和 解决 方案 , 包括 改变 复 选 
框 和 单 选 按钮 的 颜色 、 样 式 和 大 小 。 以 下 是 一 些 例子 。 
> 触摸 屏 移 动 设 备 或 者 自助 服务 终端 (kiosk )。 我 们 为 它们 创建 的 切换 组 件 具 有 自 定义 的 样 
式 ， 尺 才 偏 大 ， 适 合 手指 操作 ， 但 仍然 需要 像 原 生 控 件 那 样 捕捉 用 户 的 数据 输入 。 
> 图 表 应 用 程序 。 图 表 里 用 颜色 编码 的 复 选 框 不 仅 扮 演 着 图 例 的 角色 ， 还 用 于 切换 图 中 各 
项 的 开启 和 关闭 。 
> 带 有 排序 控件 的 搜索 结果 页 。 控 件 包含 了 日 期 、 相 关 性 和 流行 程度 等 链接 ， 用 户 选 择 单 
个 选项 来 给 数据 排序 ( 类 似 于 一 组 单 选 按钮 )。 
p> 简单 的 复 选 框 或 单 选 按钮 。 它 们 需要 自 定 义 的 样式 来 匹配 网 站 的 品牌 风格 和 视觉 设计 ， 
特别 是 那些 使 用 深 色 或 彩色 背景 的 网 站 。 
当 原生 元 素 无 法 提供 某 种 程度 的 视觉 控制 或 功能 , 必须 使 用 自 定义 设计 的 表单 元 素 时 , 就 需 
要 制定 一 个 方案 ， 让 它 具 备 与 被 取代 元 素 相 同 的 可 访问 性 和 易 用 性 。 
这 一 章 会 展示 如 何 使 用 渐进 增强 的 方法 , 把 标准 HTML 复 选 框 和 单 选 按 钮 转变 成 尽 可 能 轻 量 
的 自 定 义 设计 版 本 。 我 们 还 会 逐步 介绍 构建 自 定义 星 级 评分 组 件 ( star rating ) 的 过 程 ， 因 为 它 也 
用 到 了 许多 相同 的 技巧 和 脚本 。 
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15.1 X 光 透视 


自 定 义 输入 元 素 的 一 个 常见 用 途 是 调查 表 , 表 中 的 问题 、 分 组 复 选 框 和 单 选 按钮 匹配 茶 种 特 


定 视觉 设计 的 观感 。 











我 们 的 目标 设计 如 图 15-1 所 示 。 





贸 Comedy 


Science 上 


Western 


硬 Totaly 





Which genres do you like? 


Action /Adventure 


Epic/ Historical 


Romance 


Caddyshack is the greatest movie of all time, right? 


You must be kidding 


What's Caddyshack? 


iction 




















图 15-1 ”应 用 了 自 定义 复 选 框 和 单 选 按 钮 样式 的 调查 表 设 计 








用 X 光 透视 分 析 这 个 案例 里 的 设计 非常 容易 : 很 明显 应 该 选择 使 用 标准 的 复 选 框 和 单 选 按钮 
基础 标记 。 和 凭借 它们 的 自身 能 力 , 复 选 框 和 单 选 按 钮 能 捕 提 用 户 输入 并 显示 反馈 。 我 


作为 我 们 的 
们 的 目标 是 














利用 这 种 原生 的 功能 ， 




















从 而 不 必用 JavaScript 再 创建 一 扣 。 


搜索 能 在 不 牺牲 原生 元 素 丰 富 功能 的 前 提 下 实现 自 定义 样式 的 最 佳 方法 。 一 番 快 速 的 搜索 
后 , 几 个 脚本 浮现 了 出 来 , 它们 巧 


妙 地 组 合 使 用 JavaScript 和 CSS 来 创建 自 定义 样式 的 复 选 框 和 单 


选 按钮 ， 方 法 是 隐藏 原 有 的 input， 然 后 插入 那些 能 够 有 效 添 加 样式 的 自 定义 元 素 标记 进行 蔡 换 。 











这 些 脚 本 通 











常 相当 复杂 ， 因 为 它们 要 重新 创建 原生 复 选 框 或 单 选 按钮 所 具备 的 全 部 功能 、 行 为 、 





键盘 事件 和 可 访问 特 怕 





E。 如 果 是 不 理解 ARIA 的 旧 款 屏 幕 阅 读 器 ， 或 者 浏览 器 不 支持 








图 像 ， 这 些 技巧 就 会 失效 ， 留 下 不 能 用 的 input。 虽 然 替 换 有 时 是 必须 的 〈 第 17 章 介绍 自 定义 下 





拉 列 表 框 时 会 介绍 )， 但 它 引 入 了 代码 复杂 性 ， 而 我 们 想 找到 一 种 更 为 优雅 的 解决 方案 。 
探寻 其 他 主意 时 , 我 们 想起 了 一 个 关键 的 特性 , 它 可 以 解决 我 们 的 问题 : 在 所 有 的 主流 浏览 


























器 里 ， 点 击 关联 某 个 复 选 框 或 单 选 按钮 input 的 label 时 ， 产 生 的 效果 和 点 击 表单 元 素 自身 相同 。 
它 会 切换 复 选 框 的 选中 状态 ， 或 者 选择 单 选 按钮 。 

理论 上 ， 这 种 事 不 应 该 发 生 。HTML 规 范 写 道 : 当 一 个 label 元 素 获得 焦点 时 ， 它 把 焦点 传 
给 它 所 关联 的 控件 。 但 是 , 在 我 们 测试 的 每 一 种 浏览 器 里 ， 点击 标签 会 把 焦点 和 点 击 事件 同时 传 











给 关联 的 复 选 框 或 单 选 按钮 。 这 种 浏览 需 行为 给 了 我 们 一 个 至 关 重 要 的 挂钩 ,让 我 们 能 在 很 大 程 
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度 上 借用 原生 元 素 ， 为 增强 体验 制作 轻 量 但 有 着 自 定义 视觉 效果 的 复 选 框 和 单 选 按钮 。 

我 们 知道 能 单纯 依靠 1abel 元 素来 控制 原生 复 选 框 或 单 选 按 钮 的 状态 ， 而 不 必要 求 用 户 直接 
点 击 实际 的 input 元 素 。 可 以 在 增强 体验 里 利用 1abel 的 这 个 特性 给 它 应 用 样式 ， 使 它 看 起 来 像 一 
个 自 定 义 的 input， 并 能 提供 视觉 反馈 。 

做 一 些 CSS 定 位 工作 后 ， 就 可 以 把 label 元 素 堆 县 到 原生 复 选 框 或 者 单 选 按钮 的 上 方 了 ， 如 
图 15-2 所 示 。 通 过 给 1abel1 添 加 一 张 吾 有 自 定义 复 选 框 或 单 选 按钮 设计 的 背景 图 像 ， 实 际 上 就 让 
蔽 了 原生 元 素 ， 尽 管 它 仍然 是 可 见 的。 做 这 一 切 的 必要 条 件 是 input 和 标签 在 基础 标记 里 有 着 正 
确 的 语义 配对 : 换 句 话说， 标签 的 for 属 性 值 要 匹配 input 的 id 值 。 























图 所 Comedy 











图 15-2 标签 和 它 的 自 定义 背景 图 像 被 CSS 放 置 在 原生 复 选 框 的 上 方 


通过 这 种 方法 ,我们 让 原生 复 选 框 保持 可 见 ， 并 处 在 它 正 常 的 网 页 位 置 上 ,而 不 是 用 CSS 把 
它 定位 到 屏幕 之 外 或 者 隐藏 起 来 。 图像 可 用 时 , 背景 图 像 就 会 显示 在 标签 上 , 能 看 到 自 定义 样式 ， 
同时 遮 住 了 原生 的 input。 浏 览 絮 不 支持 图 像 时 ， 只 要 标签 的 背景 色 被 设置 成 透明 ， 原 生 input 就 
能 透 过 标签 看 到 ， 这 样 的 话 控件 仍然 可 用 ， 如 图 15-3 所 示 。 



































地 Comedy 图 Comedy 
图 15-3 ”增强 版 的 自 定义 复 选 框 ,分 别 是 浏览 器 启用 图 像 ( 左 图 ) 和 禁用 图 像 ( 右 图 ) 时 


这 个 阶段 , 我 们 已 经 有 了 一 套 清 晰 的 策略 来 增强 一 组 HTML 复 选 框 和 单 选 按 钮 。 对 我 们 网 站 
的 每 位 访问 者 ( 即使 用 的 是 最 古老 的 浏览 器 ,最 精简 的 可 上 网 设备 ,或 者 系 统 选 择 性 禁用 了 某 些 
功能 )， 我 们 都 会 输出 简单 的 语义 化 HTML， 并 且 有 信心 让 所 有 人 都 能 访问 它 ， 如 图 15-4 所 示 。 






































Which genres do you like? 


加 Action /Adventure “加 Comedy 口 Epic/ Historical 口 Science Fiction DRomance OQ Western 


Caddyshack is the greatest movie of all time, right? 
QTotaly BYoumustbekidding © What's Caddyshack? 














图 15-4 ”基本 体验 里 所 见 的 复 选 框 和 单 选 按钮 


使 用 标签 创建 增强 的 自 定义 样式 复 选 框 或 单 选 按 钮 能 够 保留 原生 input 的 所 有 功能 、 固 有 的 
键盘 支持 ， 以 及 可 访问 特性 。 这 样 做 就 无 需 再 使 用 ARIA 属 性 了 ， 因 为 所 有 用 户 〈 包 括 屏幕 阅读 
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器 用 户 ) 仍然 是 在 和 原生 的 表单 元 素 交 互 。 使 用 这 种 方法 后 , 增强 体验 里 几乎 完全 不 需要 再 添加 
额外 的 标记 ， 脚 本 也 能 写 得 简单 和 轻 量 。 


15.2 创建 自 定义 复 选 杠 








确立 目标 设计 和 最 终 目的 后 , 接 下 来 分 析 如 何 构建 基础 标记 ,以 及 如 何 用 CSS 和 一 小 段 脚 本 
把 标记 增强 成 自 定义 的 表单 控件 。 


15.2.1 基础 标记 


首先 为 调查 问题 的 复 选 框 部 分 创建 基本 HTML 标 记 。 

用 一 个 form 标 签 围 住 调查 问卷 ， 这 样 就 能 提交 它 了 。 在 它 的 内 部 ， 把 复 选 框 控 件 纳入 一 个 
fieldset 进 行 归 组 ， 并 将 legend 标 签 用 于 问题 的 文字 部 分 。 

关联 各 个 input 和 1label1 至 关 重 要 ， 方 法 是 设置 标签 的 for 属 性 ， 使 它 匹配 复 选 框 input 的 id。 
这 些 元 素 必须 正确 配对 才能 通过 点 击 标签 来 切换 复 选 框 的 状态 : 


<form action="moviepoll.php" action="post"> 


<fieldset> 


























<legend>Which genres do you like?</legend> 


<input 
<label 


<input 
<label 


<input 
<label 


<input 
<label 


<input 
<label 


<input 
<label 


</fieldset> 


</form> 


type="checkbox" name="genre" id="action" value="action" /> 
for="action">Action / Adventure</label> 


type="checkbox" name="genre" id="comedy" value="comedy" /> 
for="comedy">Comedy</label> 


type="checkbox" name="genre" id="epic" value="epic" /> 
for="epic">Epic / Historical</label> 


type="checkbox" name="genre" id="science" value="science" /> 
for="science">Science Fiction</label> 


type="checkbox" name="genre" id="romance" value="romance" /> 
for="romance">Romance</label> 


type="checkbox" name="genre" id="western" value="western" /> 
for="western">Western</label> 


注意 在 屏幕 阅读 器 里 ，fieldset 的 legend 文 字 会 在 里 面 的 各 个 input 之 前 被 重复 朗读 ， 所 以 最 
好 让 它 保持 简洁 ， 同 时 又 有 描述 性 。 


在 完全 不 添加 CSS 样 式 的 情况 下 ,这 些 复 选 框 和 标签 对 很 清楚 地 与 问题 归 组 在 一 起 , 使 调查 
表 对 所 有 人 都 可 用 ， 如 图 15-5 所 示 。 
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Which genres do you like? 


园 Action /Adventure 辆 Comedy 口 Epic/ Historical DO Science Fiction 口 Romance DO Western 














图 15-5 无 样式 的 复 选 框 基础 标记 
为 了 让 它 看 起 来 与 我 们 的 网 站 更 加 一 致 并 添加 少许 视觉 样式 , 因此 应 用 一 些 非常 简单 的 CSS 
规则 ， 它 们 对 几乎 所 有 浏览 器 都 是 “安全 ”的 。 
> 给 body 加 上 一 列 字体 ， 使 它 匹配 我 们 的 网 站 设计 。 
> 将 legend 加 粗 ， 使 问题 和 选项 之 间 有 更 好 的 视觉 层次 。 
> 给 legend 四 周 和 每 个 标签 的 右 侧 都 加 上 一 点 外 边 距 ， 从 而 在 视觉 上 更 好 地 分 隔 这 些 选项 ， 
并 增加 各 个 复 选 框 和 其 标签 之 间 的 视觉 联系 ,使 网 页 更 容易 阅读 。 
> 我 们 的 “安全 ”样式 在 基本 样式 表 里 看 起 来 如 下 所 示 : 


body { font-family: "Segoe UI", Arial, sans-serif; } 











fieldset { margin-top: 1em; margin-bottom: 1em; border:1px solid #ddd; } 
legend { font-weight:bold; } 
label { margin-right:1.2em; } 


> 在 网 页 上 看 起 来 则 如 图 15-6 所 示 。 





Which genres do you like? 





加 Action /Adventure 加 Comedy 口 Epic/ Historical 口 Science Fiction DO Romance 口 Western 


























图 15-6 ”应 用 安全 样式 后 的 基础 复 选 框 





出 


: 士 衬 


注意 我 们 没有 在 基本 的 安全 样式 上 花 太 多 心思 ， 因 为 更 好 的 做 法 是 使 CSS 保 持 简 单 ， 尽 可 能 
让 各 种 设备 使 用 原生 的 方式 泻 染 。 你 会 看 到 我 们 不 指定 这 里 任何 元 素 的 字体 大 小 或 者 尺 
寸 ， 因 为 想 让 浏览 器 自己 判断 如 何 才 能 最 好 地 呈现 这 段 HTML。 另 外 ， 我 们 会 偶尔 但 有 
目的 地 使 用 外 边 距 ， 因 为 相信 它 大 大 增加 了 网 页 的 可 用 性 ， 但 是 我 们 也 明白 ， 许 多 老式 
或 移动 浏览 器 可 能 会 忽略 外 边 距 的 样式 规则 。 


15.2.2 ”增强 标记 和 样式 

建立 基础 标记 后 ,现在 可 以 确定 浏览 器 通过 能 力 测 试 后 增强 脚本 应 该 琶 加 上 的 标记 变化 和 高 
级 样式 了 。 

这 个 自 定 义 复 选 框 十 分 简单 ， 只 需要 做 一 次 标记 增强 : 增强 脚本 会 添加 一 个 带 有 
custom-checkbox 类 的 包装 器 div: 


<div class="custom-checkbox"> 
<input type="checkbox" name="genre" id="check-1" value="action" /> 
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<label for="check-1">Action / Adventure</label> 
</div> 


这 个 类 会 用 来 应 用 我 们 的 增强 CSS 样 式 。 首 先 ，div 会 被 相对 定位 ， 这 样 就 能 把 1abel 和 复 选 
框 绝对 定位 在 这 个 容器 内 : 
.custom-checkbox { position:relative; } 
接 下 来 ,绝对 定位 input,， 并 将 它 从 容 咒 的 左上 角 向 内 移动 几 像素 ,帮助 它 与 标签 文本 对 齐 。 
然后 给 标签 设置 z-index 来 确保 它 位 于 上 层 : 
.CUstom-checkbox input { 
position:absolute; 
left:2px; 


top:2px; 
margin:0; 





接 下 来 ,为 label 编 写 CSS 规 则 ,将 它 显示 成 一 个 位 于 input (z-index 为 1 ) 前 面 的 块 级 元 素 。 
给 标签 增加 30 像 素 的 左 侧 内 边 距 , 给 处 于 文本 标签 左 侧 的 自 定义 复 选 框 背景 图 像 留 出 空间 。 再 添 
加 一 条 规则 来 确保 整个 标签 在 所 有 浏览 器 里 看 上 去 都 是 可 点 击 的， 具体 做 法 是 把 cursor 设 为 


pointer: 














.Custom-checkbox label { 
display:block; 
position:relative; 
font-size:1.3em; 
padding-right:1em; 
line-height:1; 
padding: .5em 0 .5em 30px; 
margin:0 0 .3em; 
cursor:pointer; 
z-index:10; 


} 
然后 添加 一 张 组 合 图 像 ， 这 张 自 定 义 设计 的 背景 图 像 代表 了 标签 的 各 种 状态 。 


提示 “用 单 张 图 像 代替 多 张 能 降低 服务 器 请 求 数量 ， 而 且 会 预先 缓存 各 种 状态 ， 从 而 使 网 页 能 
够 更 快 地 加 载 O 











使 用 这 种 方法 时 有 两 个 必要 条 件 需要 牢记 ， 它 们 确保 了 组 合 岁 像 能 完全 遮盖 原生 的 复 选 框 。 
> 组 合 图 像 必 须 有 不 透明 的 背景 这样 它们 就 能 完全 迹 住 原生 的 input。 

> 组 合 图 像 里 的 每 一 张 子 图 像 都 必须 足够 大 ， 能 完全 遗 住 任何 交互 状态 下 的 复 选 框 。 举 个 

例子 ， 当 你 在 苹果 Mac 电 脑 上 使 用 火狐 浏览 器 时 ， 复 选 框 在 获得 焦点 后 会 “发 光 ”"， 显 示 

出 3 像素 的 蓝 色 边框 。 组 合 图 像 里 的 子 图 像 必须 足够 大 ， 能 遮 住 这 种 效果 。 

我 们 的 组 合 岁 像 垂直 堆 琶 了 4 种 不 同 的 复 选 框 状态 , 自 上 而 下 分 别 是 未 选中 、 未 选中 时 悬 停 、 

已 选中 和 已 选中 时 悬 停 。 可 以 按照 你 认为 合适 的 间距 分 隔 这 些 组 合 图 像 , 但 它们 之 间 的 距离 应 该 
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足够 远 ， 以 防止 别 的 状态 显露 出 来 ,因为 标签 的 高 度 会 随 着 字体 增 大 或 自动 换行 而 增加 。 考 虑 到 
这 个 例子 的 目的 ， 我 们 给 各 张 状 态 图 像 均匀 地 设置 了 100 像 素 的 间距 ， 如 图 15-7 所 示 。 





ed 











图 15-7 复 选 框 的 组 合 图 像 对 所 有 交互 状态 都 做 了 视觉 处 理 ， 把 它们 堆 秋 起 来 ， 并 在 
各 个 状态 之 间 留 出 了 很 大 的 空间 
我 们 设置 了 一 条 通用 规则 ， 把 复 选 框 组 合 图 像 指 派 给 了 label: 


.Custom-checkbox label { 
background:url(../images/checkbox.gif) no-repeat; 

















现在 , 可 以 加 入 CSS 规 则 来 移动 复 选 框 组 合 图 像 的 背景 位 置 , 以 用 于 未 选中 、 未 选中 时 巧 停 、 
已 选中 和 已 选中 时 悬 停 这些 状 态 。 因 为 每 种 状态 都 在 组 合 图 像 里 被 均匀 地 分 隔 开 , 所 以 只 需要 每 
次 调整 100 像 素 的 vertical position 就 可 以 了 。 理 想 情 况 下 ， 使 用 CSS 的 :hover 伪 类 来 指派 悬 停 
状态 ,但 不 是 所 有 的 现代 浏览 器 都 支持 标签 元 素 的 :hover, 因此 会 给 mouseover 添 加 一 个 名 为 hover 
的 类 ， 然 后 在 mouseout 上 移 除 它 。 


.Custom-checkbox label { 
background-position:-10px -14px; 

} 

.Custom-checkbox label.hover, .custom-checkbox label.focus { 
background-position:-10px -114px; 

} 

.Custom-checkbox label.checked { 
background-position:-10px -214px; 

} 

.Custom-checkbox label.checkedHover, .custom-checkbox label.checkedFocus { 
background-position:-10px -314px; 








此 时 ， 所 有 4 种 复 选 框 状态 看 上 去 都 和 原 设计 一 样 了 ， 如 图 15-8 所 示 。 
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图 15-8 ”增强 的 复 选 框 设计 ， 通 过 改变 组 合 图 像 的 背景 位 置 创建 各 种 状态 
昌 然 悬 停 状态 的 视觉 转换 很 有 帮助 , 但 不 是 所 有 用 户 都 能 辨别 它们 。 举 个 例子 , 为 了 让 获得 
焦点 时 的 状态 对 用 键盘 导航 的 用 户 更 明显 , 给 当前 获得 焦点 的 选项 添加 一 圈 浅 灰色 的 点 状 轮廓 线 
( 如 图 15-9 所 示 )， 方法 是 在 标签 上 添加 一 个 focus 类 : 


.Custom-checkbox label.focus { outline: 1px dotted #ccc; } 














Comedy 











图 15-9 ”围绕 着 标签 的 点 状 轮 廊 线 有 助 于 键盘 导航 


制作 出 各 种 交互 状态 的 标记 和 样式 后 , 我 们 接 下 来 会 编写 脚本 , 在 用 户 悬 停 鼠 标 和 点 击 自 定 
义 复 选 框 时 切换 标签 的 交互 状态 。 








15.2.3” 复 选 框 脚本 


用 来 增强 原生 复 选 框 的 脚本 非常 简单 。 首 先 ， 收 集 所 有 的 复 选 框 ， 方 法 是 寻找 任何 type 为 
checkbox 的 input : 

var checkboxes = $('input[type=checkbox]'); 

然后 使 用 jQuery 的 each 方 法 遍历 各 个 复 选 框 寻找 对 应 的 label (条 件 是 它 的 for 属 性 匹配 该 复 
选 框 的 id )， 然 后 把 两 者 放 人 一 个 带 有 custom-checkbox 类 的 div 里 。 同 时 趁 着 手头 上 有 1abel， 还 
会 给 它 指派 mnouseover 和 mouseout 事 件 ， 作 用 是 当 用 户 把 鼠标 悬 停 在 它 上 方 时 切换 hover 类 : 


// 遍 历 各 个 复 选 框 input 
checkboxes.each(function(){ 
// 找 到 关联 的 标签 元 素 
var label = $('label[for='+ $(this).attr( id) +']'); 
// 给 标签 绑 定 一 个 mouseoveTr 事 件 
label.mouseover(function(){ 
// 添 加 hover 类 
$(this).addClass('hover'); 
// 检 查 复 选 框 是 否 有 .checked 类 
if( $(this).is('.checked') ){ 
// 添 加 checkedHover 类 
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$(this).addClass('checkedHover'); 


}); 
// 给 标签 绑 定 mouseout 事 件 
label.mouseout(function(){ 
// 移 除 所 有 的 hover 类 
$(this).removeClass('hover checkedHover'); 
]); 
// 把 复 选 框 和 标签 放 入 一 个 自 定义 复 选 框 div 里 
$(this).add(label).wrap('<div class="custom-checkbox"></div>'); 


}); 

接 下 来 ,创建 一 个 自 定义 的 updatestate 事 件 ， 检 查 input 当 前 是 否 已 被 选中 。 如 果 已 选中 ， 
脚本 就 会 添加 checked 类 ,将 组 合 图 像 定位 到 正确 的 状态 ,如 果 未 选中 ,就 移 除 任何 现 有 的 checked、 
checkedHover 或 checkedFocus 类 ,使 自 定 义 复 选 框 看 起 来 是 未 选中 的 : 


// 给 所 有 复 选 框 绑 定 自 定义 的 updateState 事 件 
checkboxes.bind('updateState', function(){ 
// 找 到 关联 的 标签 元 素 
var label = $('label[for='+ $(this).attr('id) +']'); 
// 检 查 复 选 框 是 否 已 被 选中 
if ( $(this).is(':checked') ) { 
// 给 标签 元 素 添加 checked 类 
label.addClass('checked'); 





























} 
// 如 果 复 选 框 未 被 选中 
else { 
// 从 标签 上 移 除 一 些 类 
label.removeClass('checked checkedHover checkedFocus'); 


} 
上 入 


绑 定 这 个 自 定义 事件 本 身 实际 上 不 会 做 任何 事 ， 因 为 它 不 是 click 或 mouseover 这 样 的 原生 事 
件 。 为 了 让 updatestate 能 够 运行 , 我 们 必须 自己 触发 它 。 脚 本 首次 运行 时 , 使 用 jQuery 的 trigger 
方法 来 运行 updateState 函 数 ， 设置 所 有 自 定义 复 选 框 以 匹配 原生 复 选 框 的 选中 状态 : 


// 在 网 页 载 入 时 立即 触发 UpdateState 
checkboxes.trigger('updateState’' ); 


然后 , 给 每 个 复 选 框 都 绑 定 一 个 click 事 件 , 只 要 点 击 复 选 框 input 或 label 就 运行 updatesState 
函数 。 使 用 jQuery 的 简化 方法 click 来 绑 定 点 击 事件 ， 它 的 作用 和 bind('click' ) 是 一 样 的 : 

// 给 复 选 框 绑 定 一 个 click 事件 

checkboxes.click(function(){ 


// 点 击 复 选 框 时 触发 updateState 
$(this).trigger( updateState ' ); 

















]); 
为 了 给 带 焦点 状态 添加 点 状 轮廓 线 ， 在 某 个 input 获 得 焦点 时 指派 focus 类 ,用 的 同样 是 该 事 
件 的 简化 方法 : 


// 给 复 选 框 绑 定 一 个 focus 事 件 
checkboxes.focus(function(){ 
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// 找 到 关联 的 标签 元 素 

var label = $('label[for='+ $(this).attr('id) + ] ); 

/// 给 标签 添加 focus 类 

label.addClass('focus'); 

// 如 果 这 个 input 是 选中 的 

if( $(this).is(':checked') ){ 
// 添 加 checkedFocus 类 
$(this).addClass('checkedFocus'); 

} 

}); 


然后 在 input 失 去 焦点 时 移 除 focus 类 : 


// 给 复 选 框 绑 定 一 个 blur 事 件 
checkboxes.blur(function(){ 

// 找 到 关联 的 标签 元 素 

var label = $('label[for='+ $(this).attr( id) + ] ); 

// 从 标签 上 移 除 focus 相 关 的 类 
label.removeClass('focus checkedFocus'); 


)); 
这 些 从 基本 到 增强 的 标记 、 样 式 和 脚本 就 是 用 于 调查 表 复 选 框 的 完整 代码 。 应 用 这 些 增强 样 
式 后 的 最 终 设计 如 图 15-10 所 示 。 








Which genres do you like? 


轩 Action / Adventure 
Comedy 
Epic / Historical 
Science Fiction 
Romance 


Western 











图 15-10 ” 带 有 自 定义 复 选 框 的 最 终 调 查 表 设 计 


15.3 创建 自 定义 单 选 按钮 


我 们 会 给 单 选 按钮 使 用 和 复 选 框 差 不 多 的 HTML 标 记 , 并 遵循 类 似 的 操作 方法 ,大 量 重 复 使 
用 样式 和 脚本 来 增强 它们 。 








15.3.1 基础 标记 


和 复 选 框 一 样 ， 我 们 会 给 问题 创建 一 个 带 legend 的 fieldset ， 然 后 将 一 组 单 选 按钮 input 和 
label 对 用 于 各 个 选项 : 
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<fieldset> 
<legend>Caddyshack is the greatest movie of all time, right?</legend> 


<input type="radio" name="opinions" id="totally" value="totally" /> 
<label for="totally">Totally</label> 


<input type="radio" name="opinions" id="no-way" value="no-way" /> 
<label for="no-way">You must be kidding</label> 


<input type="radio" name="opinions" id="whats-caddyshack" 
value="whats-caddyshack" /> 
<label for="whats-caddyshack">What's Caddyshack?</label> 


</fieldset> 

在 完全 不 带 CSS 的 情况 下 ,这些 单 选 按 钮 控件 很 清楚 地 与 它们 对 应 的 问题 归 组 在 一 起 , 而 且 
完全 可 用 。 如 果 我 们 把 这 些 单 选 按钮 添加 到 之 前 创建 的 表单 里 ， 那 么 fieldset 、legend 和 和 1abel 
元 素 就 会 继承 为 复 选 框 创建 的 那些 “安全 ”样式 ， 如 图 15-11 所 示 。 




















Caddyshack is the greatest movie of all time, right? 
@ Totally © You mustbe kidding 3 What's Caddyshack? 





























图 15-11 ”应 用 安全 样式 后 的 单 选 按 钮 基础 标记 








15.3.2 ”增强 标记 和 样式 


和 复 选 框 一 样 ， 增 强 脚本 会 用 一 个 带 有 custom-radio 类 的 div 来 围 住 每 一 对 单 选 按钮 input 和 
label， 这 样 就 可 以 添加 增强 样式 和 行为 了 : 


<div class="custom-radio"> 
<input type="radio" name="opinions" id="totally" value="totally" /> 
<label for="totally">Totally</label> 

</div> 


然后 为 单 选 按钮 创建 一 张 背景 组 合 图 像 ( 同样 要 确保 组 合 图 像 有 不 透明 的 背景 , 每 种 状态 要 
大 到 能 遮 住 原 生 的 浏览 器 反馈 , 状态 图 像 要 垂直 排列 , 并 用 标准 的 100 px 增 量 分 隔 开 ), 如 图 15-12 


15 






































图 15-12 包含 未 选中 、 悬 停 和 已 选中 状态 的 自 定义 单 选 按钮 组 合 图 像 
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你 可 能 会 注意 到 一 个 不 同 之 处 , 那 就 是 单 选 按钮 没有 之 前 为 复 选 框 创 建 的 已 选中 时 悬 停 这 种 
状态 ( 就 像 .custom-checkbox 1abel.checkedHover )。 单 选 按钮 在 选中 时 不 允许 用 户 把 它 切 换 到 未 
选中 状态 ， 所 以 这 一 块 的 视觉 反馈 是 不 必要 的 。 

因为 自 定义 单 选 按钮 的 图 像 和 复 选 框 同样 位 于 原生 input 的 上 方 ， 所 以 可 以 把 单 选 按钮 规则 
添加 到 增强 样式 表 里 的 复 选 框 规则 上 。 

我 们 会 添加 custom-radio 类 选择 器 到 封装 容器 、input 和 标签 的 规则 上 ， 而 不 需要 修改 这 些 
CSS 规 则 : 


.Custom-checkbox, .custom-radio { 
position:relative; 
} 
.Custom-checkbox input, .custom-radio input { 
position:absolute; 
left:2px; 
top:2px; 
margin:0; 
} 
.Custom-checkbox label, .custom-radio label{ 
display:block; 
position:relative; 
font-size:1.3em; 
padding-right:1em; 
line-height:1; 
padding:.5em 0 .5em 30px; 
margin:0 0 .3em; 
cursor:pointer; 


} 
另外 ， 为 custom-radio 类 设置 背景 组 合 图 像 的 路 径 : 


.Custom-radio label { 
background: url(../images/radio button.gif) no-repeat; 


} 

我 们 特地 把 单 选 按钮 子 图 像 的 间距 设置 得 和 复 选 框 组 合 图 像 一 致 , 这 样 它们 的 各 种 状态 就 能 
共用 同一 条 CSS 图 像 定位 规则 。 我 们 只 需要 给 各 条 规则 添加 custom-radio 标 签 的 选择 器 即 可 。 
为 checkedHover 状 态 只 适用 于 复 选 框 ， 所 以 我 们 会 让 这 条 规则 保持 不 变 : 

.Custom-checkbox label, 


.Custom-radio label { 
background-position:-10px -14px; 























.CuUstom-checkbox label.hover, 
.CuUstom-checkbox label.focus, 
.Custom-radio label.hover, 
.Custom-radio label.focus { 
background-position:-10px -114px; 
} 
.Custom-checkbox label.checked, 
.Custom-radio label.checked { 
background-position:-10px -214px; 
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} 


.Custom-checkbox label.checkedHover, .custom-checkbox label.checkedFocus { 
background-position:-10px -314px; 


} 
此 时 , 为 全 部 三 种 单 选 按 钮 状态 (未 选中 、 未 选中 时 悬 停 和 已 选中 ) 提供 所 需 样式 的 代码 就 
完成 了 ， 如 图 15-13 所 示 。 





What's Caddyshack? 


What's Caddyshack? 


大 What's Caddyshack? 




















图 15-13 ” 创 | 到 
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由 
kK 
Lll 
着 


单 选 按 钮 状态 的 方法 是 改变 组 合 图 像 的 背景 位 置 











15.3.3” 单 选 按 钮 脚本 


我 们 的 自 定义 复 选 框 和 单 选 按 钮 既 有 着 相似 的 设计 , 又 有 相似 的 行为 , 所 以 合理 的 做 法 是 把 
单 选 按 钮 的 功能 逻辑 整合 到 之 前 为 复 选 框 创建 的 脚本 之 中 。 
首先 ， 修 改 一 开始 的 选择 范围 ， 把 单 选 按钮 也 包括 进来 ， 用 checksRadios 的 变量 名 代替 


checkboxes: 








// 找 到 页 面 上 所 有 的 复 选 框 和 单 选 按钮 
var checksRadios = $('input[type=checkbox],input[type=radio]'); 


然后 修改 第 一 个 循环 ， 用 一 个 带 有 恰当 类 名 的 div 围 住 我 们 的 input/1abel 对 : 


// 遍 历 各 个 input 
checksRadios.each(function(){ 
// 找 到 关联 的 标签 元 素 
var label = $('label[for='+ $(this).attr('id) +']'); 
// 给 标签 绑 定 一 个 mouseover 事 件 
label.mouseover(function(){ 
// 添 加 hover 类 
$(this).addClass('hover'); 
// 检 查 复 选 框 / 单 选 按钮 是 否 有 .checked 类 
if( $(this).is('.checked') ){ 
// 添 加 checkedHover 类 
$(this).addClass('checkedHover'); 





} 
})); 
// 给 标签 绑 定 mouseout 事 件 
label.mouseout(function(){ 
// 移 除 所 有 的 hover 类 
$(this).removeClass('hover checkedHover'); 
})); 
// 获 取 input 的 类 型 ， 用 作 类 名 后 级 





234 第 15 章 复 选 框 、 单 选 按钮 和 星 级 评分 





var inType = input.attr('type'); 
// 用 带 有 恰当 类 的 div 围 住 jnput 和 label 
$(this).add(label).wrap('<div class="custom-'+ inType +'"></div>'); 
}); 
我 们 的 updateState 事 件 需 要 引用 新 的 checksRadios 变量 来 涵盖 复 选 框 和 单 选 按 钮 。 
updatestate 事 件 所 包含 的 脚本 代码 不 需要 做 任何 修改 : 


// 给 所 有 的 复 选 框 和 单 选 按 钮 绑 定 自 定义 的 updateState 事 件 
checksRadios.bind('updateState' , function(){ 











D; 
类 似 地 ， 在 网 页 加 载 时 触发 checksRadios 上 的 updateSstate 事 件 : 
// 网 页 加 载 时 触发 所 有 复 选 框 和 单 选 按钮 上 的 updatestate 
checksRadios.trigger( "updateState ' ); 
click 事 件 需要 做 一 点 小 小 的 更 新 ， 以 确保 点 击 某 个 单 选 按钮 时 ， 其 他 同属 一 组 的 单 选 按钮 
也 会 更 新 ， 显 示 出 未 选中 的 状态 。 因 为 单 选 按钮 原生 就 能 控制 其 他 按钮 的 选中 状态 ,所 以 只 需 触 
发 updateSstate 事 件 ， 触 发 对 象 是 和 被 点 击 单 选 按钮 拥有 相同 name 属 性 的 所 有 ;input (〈 当然 ， 也 包 
括 被 点 击 的 单 选 按钮 ): 
// 给 复 选 框 和 单 选 按钮 绑 定 一 个 click 事 件 
checksRadios.click(function(){ 
// 获 取 此 input 的 name 属 性 
var inName = $(this).attr('name'); 
// 触 发 updateState， 范围 是 name 相 同 的 所 有 input 


$('input[name="'+ inName +']').trigger('updateState'); 
]); 


最 后 , focus 和 blur 事 件 无 需 修改 就 能 支持 单 选 按 钮 , 我 们 会 简单 地 通过 给 checksRadios 变 量 
绑 定 事件 来 添加 它们 : 


// 给 复 选 框 和 单 选 按钮 绑 定 一 个 focus 事 件 
checksRadios.focus(function(){ 














D; 

// 给 复 选 框 和 单 选 按钮 绑 定 一 个 blur 事 件 

checksRadios.blur(function(){ 

]); 

现在 我 们 的 脚本 同时 支持 了 复 选 框 和 单 选 按钮 input ， 并 且 提 供 了 一 种 可 复 用 的 干净 方 
式 , 在 那些 通过 能 力 测试 的 浏览 器 里 把 基本 体验 增强 成 一 组 格式 丰富 的 自 定义 控件 ,如 图 15-14 
所 示 。 

这 是 一 种 非常 健壮 的 方法 , 它 能 够 优雅 地 缩放 , 即使 用 户 选择 把 他 们 的 字体 大 小 设置 得 比 默 
认 尺 十 大 上 几 级 也 是 如 此 。( 使 用 高 级 CSS 样 式 构建 组 件 时 ， 测 试 这 一 点 很 重要 。) 

最 棒 的 是 ， 如 果 访 问 者 通过 了 能 力 测试 ， 但 是 出 于 某 种 原因 看 不 到 浏览 器 显示 的 图 像 ， 
那么 这 种 技巧 能 够 安全 地 转 至 备用 的 原生 input ， 而 它们 是 完全 可 见 和 可 访问 的 ， 如 图 15-15 
所 示 。 
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Which genres do you like? 
Action /Adventure 
页 Comedy 
| Epic/ Historical 
Science Fiction 
| Romance 


| Western 


Caddyshack is the greatest movie of all time, right? 


矶 Totally 
You must be kidding 


What's Caddyshack? 











图 15-14 ”增强 自 定 义 复 选 框 和 单 选 按钮 











Which genres do you like? 


加 Action / Adventure 


EA 


Comedy 


| Epic/ Historical 


罗 


Science Fiction 
[| Romance 


DD Western 


Caddyshack is the greatest movie of all time, right? 


和 Totally 


”You must be kidding 





了 What's Caddyshack? 











图 15-15 ”禁用 浏览 器 图 像 之 后 的 增强 自 定 义 复 选 框 和 单 选 按钮 


15.4 让 自 定义 input 更 进一步 : 星 级 评分 组 件 


用 定制 复 选 框 和 单 选 按钮 的 技巧 创建 了 一 个 星 级 评分 组 件 。 评 分 组 件 基于 预先 定义 好 的 尺 
度 ， 收 集 和 显示 用 户 的 主观 反馈 。 其 中 ， 星 级 评分 组 件 尤其 流行 ， 它 的 尺度 一 般 由 5 颗 星 构成 ， 
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显示 出 用 户 有 多 人 么 喜欢 某 种 产品 或 服务 ( 比如 5$ 颗 星 = 很 喜欢 ，1 颗 星 = 很 不 喜欢 ， 有 时 还 会 有 一 个 
“忽略 ”选项 )。 数 以 百 万 计 的 用 户 使 用 星 级 评分 组 件 进 行 在 线 投票 ， 评 价 亚马逊 网 站 上 的 商品 ， 
或 者 给 Netflix 里 的 电影 打分 ， 如 图 15-16 所 示 。 














Star Wars 


Princess Bride 


ty 
Oscar-worthy 


Animal House 














图 15-16” 星 级 评分 组 件 的 设计 


为 了 和 电影 这 个 主题 保持 一 致 , 我 们 会 创建 一 个 组 件 , 用 户 可 以 给 他 们 看 过 的 电影 评分 , 范 
围 从 “不 值 一 看 ”(unwatchable ) 到 “奥斯卡 级 ”( Oscar-worthy )。 
为 用 户 被 限制 只 能 选择 一 组 选项 中 的 一 个 , 所 以 基础 标记 的 理想 选择 是 一 组 单 选 按钮 。 但 
是 ,评分 组 件 自 司 有 一 些 不 寻常 的 重要 特点 ， 需 要 考虑 。 
p> 评分 组 件 通常 被 视 为 独立 的 组 件 ， 在 用 户 选 择 某 一 分 值 后 用 JavaScript 将 数据 异步 提交 回 
服务 器 。 为 了 确保 评分 功能 在 没有 JavaScript 时 也 能 工作 ， 需 要 在 基础 标记 里 添加 一 个 提 
交 ;input， 然 后 调整 脚本 ， 把 它 从 增强 体验 里 移 除 。 
P 和 更 简单 的 标准 单 选 按钮 或 复 选 框 不 同 ， 评 分 组 件 的 尺度 是 累加 式 的 〈 就 是 说 ， 当 用 户 
把 光标 悬 停 在 第 4 颗 星 上 时 ， 第 1、2 和 3 颗 星 也 处 于 “开启 ”状态 )。 我 们 需要 基于 自 定义 
复 选 框 和 单 选 按钮 的 脚本 来 编写 一 个 新 脚本 ， 它 将 包括 一 种 能 提供 恰当 反馈 的 机 制 。 

































































15.4.1 基础 标记 


评分 组 件 单 选 按 钮 组 的 基础 标记 和 “安全 ”样式 应 该 完全 遵循 我 们 为 自 定 义 单 选 按钮 概括 的 
流程 。 要 确保 : 

> 给 所 有 的 单 选 按钮 input 都 指派 一 个 共同 的 name 属 性 和 值 ， 使 它们 成 为 一 个 组 ; 

> 给 所 有 的 input 都 指派 一 个 唯一 的 id， 然 后 给 各 个 关联 的 标签 指派 一 个 引用 此 id 值 的 for 
属性 。 

用 于 增强 的 标记 、 样 式 和 脚本 也 和 标准 自 定义 单 选 按钮 元 素 非 常 相 似 。 下 面 关 于 悬 停 状 态 处 
理 的 讨论 中 会 详细 介绍 它们 。 

为 了 让 用 户 在 缺少 JavaScript 支 持 时 也 能 提交 评分 , 在 基础 代码 的 每 个 fieldset 里 都 加 入 一 个 


提交 input : 
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<fieldset> 
<legend>Star Wars</legend> 
<input type="radio" name="star-wars" id="star-wars-Unwatchable 
value="Unwatchable"” /> 
<label for="star-wars-Unwatchable">Unwatchable</label> 


n 


<input type="radio" name="star-wars" id=" star-wars-Bad" value="Bad" /> 
<label for="star-wars-Bad">Bad</label> 


<input type="radio" name="star-wars" id="star-wars-OK" value="OK" /> 
<label for="star-wars-OK">O0K</label> 


<input type="radio" name="star-wars" id="star-wars-Good" value="Good" /> 
<label for="star-wars-Good">Good</label> 


<input type="radio" name="star-wars" id="star-wars-Oscar-worthy" 
value="0scar-worthy" /> 
<label for="star-wars-Oscar-worthy">0scar-worthy</label> 


<input type="submit" id="star-wars" value="Rate this" class= "rating-submit" /> 
</fieldset> 


应 用 评分 基础 标记 后 ， 它 在 支持 基本 体验 的 浏览 器 里 如 图 15-17 所 示 。 








Star Wars 
OUnwatchable OBad OOK @G6o0d OQ Oscar-worthy (Ratethis) 


Princess Bride 
口 Unwatchable  @ Bad IOK gcGood I Oscar-Worthy (Ratethis 】 


Animal House 





OUnwatchable Bad OOK Good I Oscar-worthy (Ratethis) 

















图 15-17 电影 评分 组 件 的 基本 体验 ， 内 含 “ 给 它 打 分 ” ( Rate this ) 按钮 


为 默认 的 HTML 泻 染 会 把 一 组 单 选 按钮 和 标签 显示 在 同一 行 ， 所 以 这 个 没有 启用 CSS 或 
JavaScript 的 基本 体验 看 起 来 仍然 是 一 个 由 差 到 好 的 水 平 连续 区 间 ， 十 分 接近 增强 体验 。 15 





























15.4.2 ”增强 标记 和 样式 


增强 版 的 评分 组 件 只 会 输出 到 支持 JavaScript 的 浏览 右上 ， 在 那里 用 Ajax 提 交 评 分 是 安全 的 。 


启用 了 Ajax 后 ， 提 交 按 钮 就 不 是 必需 的 了 ， 因 此 在 增强 样式 表 里 把 它们 的 display 属 性 设 成 none 
来 隐藏 它们 。 给 每 个 input 都 指派 一 个 rating-submit 类 ， 这 样 就 可 以 用 这 个 类 一 次 性 隐藏 全 部 的 
input， 方 法 是 给 增强 样式 添加 下 面 这 一 行 : 





.rating-submit { display: none; } 
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评分 组 件 单 选 按 钮 的 样式 和 行为 规则 与 标准 的 单 选 按钮 稍 有 不 同 ( 举 个 例子 , 它们 的 背景 图 
像 是 星 级 图 ， 文 本 标签 则 是 隐藏 的 )， 因 此 归 组 input 和 标签 对 的 包装 器 div 需 要 有 一 个 独特 是 有 
描述 性 的 类 。 作 为 评分 组 件 ， 我 们 会 使 用 rating-option: 

«<div class="rating-option"> 

<input type="radio" name="star-rating-opt" id="OK-1" value="0K" /> 


<label for="OK-1">O0K</label> 
</div> 


带 有 rating-option 类 的 ijnput 和 1abel 元 素 使 用 的 增强 样式 和 自 定义 单 选 按钮 样式 可 以 共享 
定位 和 块 级 属性 ， 不 过 也 有 一 些 例外 。 

首先 ， 要 把 input 上 的 top 位 置 值 从 2 px 调整 为 3 px， 以 确保 它 能 完全 被 星 级 图 标 着 住 : 
.rating-option input { 

position: absolute; 

left: 2px; 

top: 3px; 

margin: 0; 


























我 们 还 会 调整 组 件 的 标签 样式 来 引用 星 级 背景 组 合 图 像 , 隐藏 标签 文本 ( 0 的 
文本 缩 进 值 和 overflow: hidden 组 合 使 用 ,使 文本 对 屏幕 阅读 器 保持 “可 见 ”)， 并 微调 内 边 
外 边 距 和 尺寸 来 适应 星 级 图 标 : 


.rating-option label { 
background: url(../images/star.gif) no-repeat -14px -11px; 
display: block; 
position: relative; 
width: 25px; 
height: 25px; 
margin: 0; 
cursor: pointer; 
text-indent: -99999px; 
overflow: hidden; 














已 选中 状态 和 悬 停 状态 里 设置 的 背景 图 像 位 置 也 应 当 加 以 调整 ， 使 其 适合 星 级 背景 组 合 
图 像 : 

.rating-option label.checked { 

background-position: -14px -211px; 


} 


.rating-option label.hover { 
background-position: -14px -111px; 


lL 


15.4.3 ”编写 星 级 评分 组 件 脚本 


虽然 基于 的 标记 和 自 定义 单 选 按钮 相同 ,但 是 这 个 增强 星 级 评分 组 件 有 一 些 行为 上 的 变化 需 
要 在 脚本 里 实现 。 
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首先 , 用 户 悬 停 于 或 者 点 击 某 个 星 级 标签 时 , 它 前 面 的 所 有 同 组 标签 也 应 该 添加 样式 。 另 外 ， 
因为 星 级 评分 组 件 里 的 标签 文本 是 隐藏 在 视野 之 外 的 , 所 以 需要 给 标签 添加 一 条 工具 提示 , 让 用 
户 能 通过 悬 停 了 解 每 个 星 级 所 代表 的 值 。 最 后 , 用 户 选 中 某 个 星 级 时 ,用 Ajax 自动 把 评分 信息 发 
送 给 服务 器 ， 这 样 用 户 无 需 点 击 “ 提 交 ” 按 钮 。 

为 了 支持 这 些 行为 变化 , 我 们 需要 以 多 种 方式 改动 脚本 。 相 比试 着 只 编写 一 个 脚本 , 然后 在 
里 面 加 入 明确 区 分 两 种 情况 所 需 的 所 有 条 件 逻 辑 , 我 们 的 选择 是 复制 原来 的 自 定义 复 选 框 和 单 选 
按钮 脚本 ， 将 它 修改 后 用 于 星 级 评分 组 件 。 

首先 ， 把 一 开始 的 元 素 选 择 修改 成 只 获取 单 选 按钮 ， 同 时 将 变量 名 由 checksRadios 改 为 
starRadios。 在 整个 脚本 里 ， 使 用 这 个 starRadios 变 量 来 指 代 我 们 所 有 的 input。 


// 找 到 网 页 上 的 所 有 单 选 按钮 
var starRadios = $('input[type=radio]'); 


需要 对 一 开始 的 单 选 按钮 循环 进行 修改 。 

> 给 每 个 函数 都 传递 一 个 index 参 数 , 它 提供 了 一 个 逐渐 增 大 的 数字 ,每 循环 一 次 就 会 递增 1。 

> 把 这 个 index 数 值 存在 它 的 label 里 ,方法 是 使 用 一 个 名 为 data 的 特殊 jQuery 属性 ， 这 样 我 
们 就 可 以 设置 和 获取 某 个 HTML 元 素 的 值 。 

Pp 悬 停 时 ， 切 换 标 签 自身 的 hover 类 ， 以 及 它 前 面 所 有 处 在 同一 行 的 星 级 评分 标签 : 


// 循 环 遍历 各 个 单 选 按钮 ， 传 递 ijndex 参 数 
starRadios.each(function(index){ 
// 找 到 关联 的 标签 元 素 
var label = $('label[for='+ $(this).attr('id) +']'); 
// 把 标签 的 index 数 值 存放 在 内 存 里 以 备 将 来 使 用 
label.data('index', index); 
// 给 标签 绑 定 一 个 mouseover 事 件 
label .mouseover(function(){ 
// 循 环 遍历 各 个 同 组 单 选 按钮 
starRadios.each(function(){ 
// 找 到 该 单 选 按钮 的 标签 ， 将 它 保存 为 0Label 变 量 
var oLabel = $('label[for='+$(this).attr('id')+']'); 
// 如 果 o0Label 就 是 悬 停 的 按钮 ， 或 者 在 它 之 前 
if(oLabel.data('index') '<= index) { 
// 给 它 添 加 hover 类 
oLabel.addClass('hover'); 





















































} 
}); 
})); 
// 给 标签 绑 定 mouseout 事 件 
label.mouseout(function(){ 
// 循 环 遍历 各 个 同 组 单 选 按钮 
starRadios.each(function(){ 
// 找 到 该 单 选 按钮 的 标签 ， 将 它 保 存 为 0Label 变 量 
var oLabel = $('1label[for='+$(this).attr( id')+ ] ); 
// 无 需 检查 index 编 号 ， 移 除 类 
oLabel .removeClass('hover'); 
}); 
]); 
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// 用 带 有 rating-option 类 的 div 围 住 jnput 和 标签 
$(this).add(label).wrap('<div class="rating-option">" 
]); 


updateState 事 件 需 要 引用 新 的 starRadios 变 量 。updateState 事 件 包 含 的 脚本 也 需要 做 类 似 的 修 
改 , 修改 成 我 们 给 各 个 循环 创建 的 变量 , 从 而 使 每 个 单 选 按钮 都 能 影响 它 前 面 按钮 的 外 观 。 这 一 次 ， 
移 除 同 组 各 个 标签 上 所 有 hover 和 checked 类 ， 然 后 给 之 前 的 所 有 同 组 星 级 标签 添加 checked 类 


// 给 所 有 单 选 按钮 都 绑 定 自 定义 的 updateState 事 件 
starRadios.bind('updateState', function(){ 
// 保 存 对 此 标签 jndex 值 的 引用 
var index = $('label[for="'+$(this).attr('id')+']').data('index'); 
// 检 查 被 点 击 的 单 选 按 钮 是 否 已 选中 
if ( $(this).is(':checked') ){ 
// 御 环 遍历 各 个 单 选 接 钮 
radioSet.each(function(){ 
// 找 到 该 单 选 按 钮 的 标签 ， 将 它 保存 为 0Label 变 量 
var oLabel = $('label[for='+$(this).attr('id')+']'); 
// 移 除 hover 和 checked 两 个 类 
oLabel .removeClass('hover checked'); 
// 如 果 0Label 就 是 悬 停 的 按钮 ， 或 者 在 它 之 前 
if(oLabel.data('index') <= index) { 
// 添 加 checked 类 
oLabel.addClass('checked'); 


</div>'); 





我 们 会 在 网 页 加 载 时 触发 checksRadios 的 updateState 事 件 , 这 样 所 有 现存 的 星 级 评分 值 对 用 
户 都 可 见 : 

// 在 网 页 加 载 时 触发 所 有 单 选 按钮 的 updatestate 事 件 

starRadios.trigger('updateState' ); 

因为 我 们 的 updatestate 事 件 能 切换 与 某 个 单 选 按钮 同 组 的 所 有 按钮 的 状态 ， 所 以 click 事 件 
就 可 以 简单 地 在 自己 身上 触发 pdatestate 事 件 。 

不 过 ， 确 实 有 必要 给 click 事 件 添 加 一 些 额 外 的 逻辑 来 向 服务 器 提交 星 级 评分 数据 。 可 以 用 
jQuery 的 ajax 函数 轻松 做 到 这 点 : 根据 标记 定义 Ajax 请 求 的 参数 ， 用 表单 的 method 属 性 指定 它 是 
作为 get 还 是 post 请 求 发 送 ( 在 这 个 案例 里 应 该 是 post 请 求 ， 因 为 数据 保存 在 服务 器 上 )， 并 用 它 
的 action 属 性 指定 请 求 的 URL。 使 用 jQuery 的 serialize 方 法 ， 把 表单 数据 以 键 值 对 的 形式 发 送 . 

// 给 单 选 按钮 绑 定 一 个 click 事 件 

starRadios.click(function(){ 

// 触 发 这 个 单 选 按钮 的 updatestate 事 件 
$(this).trigger( "updateState ' ); 

// 获 取 上 级 form 元 素 

var form = $(this).parents( "form' ); 
// 用 Ajax 发 送 表单 数据 

$.ajax({ 


type: form.attr( "method ' )， 
url: form.attr('action'), 
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data: form.serialize() 
]); 
]); 


现在 ， 点 击 单 选 按钮 ， 它 们 的 状态 就 会 保存 到 服务 器 上 。 
focus 和 blur 事 件 不 需要 修改 就 能 支持 星 级 评分 行为 。 它 们 只 是 简单 地 切换 标签 的 focus 类 


// 给 单 选 按钮 绑 定 一 个 focus 事 件 
starRadios.focus(function(){ 
label.addClass('focus'); 


]); 

// 给 单 选 按钮 绑 定 一 个 blur 事 件 

starRadios.blur(function(){ 
label.addClass('focus'); 


}); 
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这 本 书 附带 的 可 下 载 代码 ( 位 于 www.filamentgroup.com/dwpe ) 包含 了 两 个 jQuery 插件 : 
jQuery.customInputjs 和 jQuery.starRatingjs。 它 们 提供 了 创建 自 定义 复 选 框 、 单 选 按钮 和 星 级 评分 
组 件 的 简单 方法 。 

要 使 用 jQuery.customInput.js 脚 本 ， 只 需 引 用 自 定义 input 演 示 页 里 的 那些 相关 文件 ， 然 后 在 
任何 你 想 定制 的 复 选 框 或 单 选 按钮 input 上 调用 customInput 方 法 即 可 。 如 果 把 这 个 脚本 应 用 到 所 
有 的 input 上 ，, 它 会 表现 得 足够 智能 ,只 增强 复 选 框 和 单 选 按钮 ， 而 不 会 去 碰 文 本 或 者 提交 ;input: 

$("'input').customInput(); 

jQuery.starRatingjs 脚 本 有 着 相同 的 工作 方式 ， 不 过 它 只 有 在 单 选 按钮 组 上 才能 生效 。 

$('input').starRating(); 

这 两 个 插件 都 能 接受 任意 的 jQuery 选择 器 ， 使 你 能 按照 你 想 要 的 特性 划 定 input 的 选择 范围 
举 个 例子 ， 你 只 想 对 某 些 input 调 用 starRating 方 法 ， 它 们 处 于 一 个 带 有 rating 类 的 div 内 : 

$(' .rating input').starRating(); 

这 两 个 插件 的 设计 原则 是 尽 可 能 的 简单 和 轻 量 , 因此 它们 不 包含 任何 的 配置 选项 或 方法 。 你 
要 做 的 就 是 在 目标 input 上 调用 这 些 方法 ， 然 后 它们 就 会 被 增强 成 自 定义 的 版 本 。 

本 书 详细 讨论 过 ， 我 们 坚信 每 次 需要 扩展 某 个 原生 元 素 时 ， 应 该 首先 挖掘 语义 化 HTML 和 
CSS 的 全 部 潜力 ， 然 后 才 寻 求 从 头 创建 一 个 新 的 元 素 。 
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自 定义 样式 的 复 选 框 和 单 选 按钮 表单 控件 ,因而 完全 不 必 重 新 创建 这 些 元 素 。 这 人 么 做 不 仅 节 省 了 
大 量 的 工作 , 还 保持 了 原生 元 素 的 可 访问 性 、 键 盘 快 捷 方 式 和 行为 ,因此 我 们 确信 这 个 技巧 能 在 
各 种 各 样 的 浏览 器 上 可 靠 地 工作 。 

还 有 一 个 附带 的 好 处 是 , 因为 我 们 其 实 只 是 在 给 原生 元 素 添加 样式 , 所 以 表单 处 理 的 逻辑 在 
基本 体验 和 增强 体验 里 完全 一 样 。 


























疹 块 











滑 块 控件 ( slider ) 的 作用 是 截取 连续 区 间 里 的 某 个 值 或 者 某 段 数据 范围 。 许 多 用 户 能 立刻 
感觉 到 滑 块 的 直观 性 ， 因 为 它们 的 外 观 和 功能 模拟 了 日 常用 品 中 的 实体 滑 块 ， 比 如 立体 声音 响 、 
汽车 仪表 盘 控 制 器 以 及 家 用 电器 。 它 里 面 的 “轨道 ”把 能 做 的 选择 限制 在 可 用 选项 组 成 的 连续 区 
间 内 ， 而 “手柄 ”的 位 置 则 是 对 当前 选中 值 的 清楚 反馈 。 

通常 ，Web 应 用 程序 里 的 滑 块 截取 的 是 价格 和 音量 这 样 的 数值 , 但 是 它们 同样 可 以 用 于 几乎 
所 有 能 构成 连续 区 间 值 的 集合 ， 比 如 用 字母 评定 的 分 数 等 级 、 金 融 债券 评级 或 者 从 积极 到 消极 的 
情绪 。 它 们 可 以 获取 单个 值 ， 也 能 扩展 成 两 个 或 多 个 滑 块 手柄 ， 用 来 截取 多 个 值 或 者 一 段 范 围 。 

滑 块 有 下 面 这 些 常 见 用 途 。 

> 当 作 过 滤 工 具 来 设置 参数 ， 比 如 产品 尺寸 、 重 量 或 容量 ; 最 低 价 和 最 高 价 之 间 的 范围 ; 

图 集 里 照片 缩 略图 的 显示 尺寸 ;RSS 阅读 器 里 的 摘要 显示 长 度 ; 地 图 的 缩放 等 级 。 

> 能 和 人 式 音 频 或 视频 的 播放 控件 。 滑 块 在 里 面 扮演 媒体 时 间 线 的 角色 ， 可 拖 动 的 手柄 则 会 

自动 前 进 ， 指 明 当 前 的 播放 位 置 。 

当前 , 没有 哪 一 种 原生 的 HTML 表 单 控件 能 够 实现 跨 浏览 器 的 滑 块 组 件 。 使 用 滑 块 的 网 站 通 
常会 标记 一 组 HTML 元素 ( 经 常 是 div )， 然 后 用 CSS 和 JavaScript 来 应 用 样式 和 滑 块 行为 。 有 可 访 
问 性 意识 的 开发 者 还 会 加 入 基本 的 键盘 支持 和 指派 必要 的 ARIA 属 性 ， 以 确保 现代 的 屏幕 阅读 器 
能 够 了 解 该 如 何 向 有 视力 障碍 的 用 户 传 达意 义 和 行 为 。 

但 是 , 如 果 用 户 没 有 启用 JavaScript, 或 者 无 法 泻 染 出 滑 块 正常 工作 所 需 的 CSS 样 式 怎 么 办 ? 
一 些 大 量 使 用 滑 块 的 流行 网 站 ( 比如 旅游 网 站 Kayak 就 提供 了 用 来 过 滤 航 班 时 间 和 价格 的 滑 块 ) 
只 要 求 用 户 的 浏览 器 必须 支持 脚本 功能 。 它 们 不 提供 备用 的 选择 ， 完 全 没有 考虑 那些 没有 启用 
JavaScript 的 用 户 访问 这 项 功能 的 可 能 性 。 

你 没有 理由 把 用 户 锁 在 关键 功能 之 外 。 使 用 渐进 增强 方法 进行 构建 ， 就 可 以 从 基础 标记 里 的 
一 个 标准 HTML 表单 元素 ( 比如 文本 input 或 select 元 素 ) 起 步 , 向 基本 体验 里 的 所 有 用 户 提 供 核心 
功能 ， 然 后 在 增强 体验 里 把 它 转变 成 一 个 滑 块 组 件 。 本 章 会 探索 如 何 创建 一 个 普遍 可 访问 的 滑 块 。 

































































16.1 X 光 透视 
在 线 房地产 搜索 网 站 经 常 使 用 滑 块 来 简化 目标 搜索 条 件 的 设置 和 调整 工作 。 本 章 的 设计 范例 
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会 考虑 一 个 带 有 两 组 滑 块 的 公寓 搜索 表单 : 第 一 组 滑 块 收集 的 数值 范围 是 最 高 价格 ， 以 及 最 少 的 





息 ， 如 图 16-1 所 示 。 





扑 室 和 卫生 间 数 量 ; 第 二 组 收集 的 是 定性 值 ， 这 些 生活 便利 设施 的 相对 重要 性 分 成 从 “不 重要 ” 
( Not important ) 到 “必须 要 有 ”( Must have ) 4 级 连续 区 间 ， 并 在 滑 块 右边 显示 所 选 值 的 反馈 信 





Apartment Criteria 


Max Rent ($): EC) 
Min bedrooms: sh ) 
Min baths: mw ) 


Amenity Preferences 


Not important 
ee 


Subway access: @ 


Walking paths: OO 





Water views: OO 


Somewhat important 


Pretty important 


Not important 











图 16-1 增强 体验 的 目标 设计 


X 光 透视 这 些 滑 块 后 ,我 们 发 现 文本 input ,select 和 单 选 按钮 都 是 很 好 的 基础 标记 候选 元 素 。 
判断 哪 种 元 素 最 适合 基本 体验 的 方法 是 分 析 每 个 表单 字段 的 具体 数据 输入 要 求 , 并 考虑 如 何平 衡 




















以 下 两 点 : 用 户 输入 的 速度 和 灵活 性 ， 以 及 限制 数值 在 可 接受 范围 内 的 需求 。 

前 三 个 滑 块 收集 特定 的 最 小 和 最 大 范围 内 的 数值 。 最 大 租金 (rent ) 滑 块 允 许 填写 0~5000 美 
元 的 任意 数值 ， 而 卧室 (bedroom ) 与 卫生 间 (bathroom ) 滑 块 接受 的 数值 范围 就 小 一 些 ( 0~10 )。 
如 果 我 们 为 最 高 价 字段 使 用 一 个 HTML select 元 素 , 它 就 需要 在 标记 里 列 出 足 足 5000 个 可 选项 来 
实现 最 大 的 灵活 性 ， 即 使 我 们 限制 价格 按 100 美 元 递增 ， 仍 然 会 有 50 个 值 。 这 种 实现 方式 从 技术 

















上 说 是 可 行 的 ， 但 是 从 用 户 体验 的 角度 看 很 可 能 不 是 最 佳 的 做 法 。 文 本 input 则 是 一 种 更 好 的 选 
择 , 它 为 租金 字段 的 基础 标记 提供 了 大 得 多 的 灵活 性 和 用 户 友 好 度 : 在 字段 里 输入 数字 要 比 用 鼠 
标 或 键盘 与 下 拉 荣 单 交互 更 快 , 也 更 容易 。 为 了 保持 一 致 性 , 给 卧室 和 卫生 间 字 段 使 用 文本 input。 














HTML5 规 范 提供 了 一 个 type=number 的 input 属 性 


L 9 





它 支 持 使 用 一 些 定义 最 小 值 和 最 大 值 的 属 





性 来 帮助 验证 用 户 输入 。 相 比 简单 一 些 的 type=text ， 利 用 这 些 属性 能 更 充分 地 描述 租金 、 卧 室 和 
卫生 间 字 段 。 而 且 因 为 HTIML3 和 HTML4 规 范 都 规定 input 元 素 在 没有 指定 类 型 (或 者 是 未 知 类 型 ) 
时 会 默认 设置 成 type=text， 所 以 可 以 安全 地 在 基础 标记 里 使 用 HTML5 的 number input， 并 确信 它 
在 不 理解 number 类 型 的 浏览 句 里 仍然 会 显示 为 一 个 完美 可 用 的 标准 text input， 如 图 16-2 所 示 。 
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Apartment Criteria 
Max Rent ($): 2000 ， 
Min bedrooms: 2 
Min baths: 2 | 














图 16-2 ”基本 体验 里 用 于 租金 、 卧 室 和 卫生 间 数 值 的 文本 输入 框 


使 用 text 或 number 类 型 的 input 时 需要 考虑 的 一 个 重点 问题 是 数据 验证 。 与 select 不 同 , input 
不 提供 约束 或 实时 反馈 来 防止 用 户 输入 无 效 值 ， 比 如 负数 、 字 母 、 符 号 或 者 在 可 接受 范围 以 外 的 
值 。 为 了 确保 在 基本 体验 里 输入 的 数据 有 效 , 服务 器 应 当 在 用 户 每 次 提交 更 新 结果 的 表单 时 都 验 
证 输入 , 如 果 不 是 可 接受 的 值 就 显示 一 条 错误 消息 。 在 增强 体验 里 , 可 以 用 JavaScript 在 前 端 实现 
同样 的 验证 逻辑 ， 为 有 能 力 的 浏览 器 上 的 用 户 提 供 即 时 反馈 。 

我 们 还 应 该 要 考虑 用 户 与 滑 块 控件 交互 时 的 数据 间隔 。 一 个 滑 块 能 获取 的 值 的 数量 受 滑 块 轨 
道 的 宽度 限制 ， 在 这 个 设计 里 大 约 是 300 像 素 。 我 们 的 最 少 甲 室 与 卫生 间 输 入 字段 只 接受 1~10 的 
数字 ， 所 以 滑 块 的 实现 不 是 问题 : 可 以 沿 着 300 像 素 的 轨道 把 10 个 值 简单 地 均匀 分 开 摆 放 。 

租金 字段 则 是 另 一 回 事 : 它 有 5000 个 可 接受 的 值 (0~5000 美 元 , 按 1 美 元 递增 ), 但 是 滑 块 的 
手柄 在 轨道 宽度 以 内 只 能 提供 300 个 可 能 的 像素 位 置 。 如 果 我 们 均匀 分 配 这 些 像素 的 话 ， 这 就 意 
味 着 要 按 17 美 元 递增 。 虽 然 把 手柄 增 量 设 为 17 可 能 不 会 给 使 用 鼠标 的 用 户 造 成 任何 问题 (除了 这 
个 数量 看 似 有 些 随 意 )， 但 是 对 那些 使 用 键盘 方向 键 的 人 来 说 可 能 就 会 又 慢 又 不 方便 。 为 了 优化 
滑 块 ,使 其 能 快速 选择 容易 辨认 的 数字 , 我 们 将 指定 手柄 按 50 美 元 递增 ， 用 户 的 操作 方法 既 可 以 
是 拖 动手 柄 ， 也 可 以 是 使 用 方向 键 左右 移动 。 

使 滑 块 和 文本 input 同 时 出 现在 界面 上 ， 就 能 让 用 户 选 择 他 们 想 要 的 交互 方式 : 移动 滑 块 手 
柄 来 指定 某 个 租金 值 (用 于 快速 但 不 太 精 确 的 选择 ), 或 者 在 文本 input 字 段 里 输入 一 个 数字 (用 
于 精确 输入 美元 金额 )。 因 为 这 两 者 都 处 于 收集 数据 的 激活 状态 , 所 以 我 们 会 确保 它们 互相 同步 : 








































































































移动 滑 块 手柄 的 位 置 会 更 新 input 的 文本 值 ， 反 之 亦 然 ， 如 图 16-3 所 示 。 
Max Rent ($): ww ) 2507 














图 16-3 ”在 增强 体验 里 ， 滑 块 和 文本 输入 框 都 可 用 


生活 便利 设施 偏好 (Amenity Preferences ) 部 分 的 滑 块 ( 即 表单 里 第 二 组 的 三 个 滑 块 ) 收集 
的 数据 与 租金 、 卧 室 和 卫生 间 字 段 有 着 显著 区 别 。 在 这 里 , 用 户 可 以 从 以 下 四 个 预 设 值 里 选择 一 
个 :“ 不 重要 ”( Not important )、“ 较 为 重要 ”( Somewhat important ), “相当 重要 ”( Pretty 
important ) 和 “必须 要 有 ”( Must have )。 要 在 基础 标记 里 表现 这 些 选 项 , 可 以 使 用 一 组 单 选 按钮 ， 
因为 它 能 以 易于 浏览 的 方式 显示 出 所 有 可 能 的 选项 ,并 限制 用 户 只 能 做 有 效 的 选择 。 但 是 ,考虑 
到 各 个 单 选 按钮 及 其 标签 所 需 空间 ，select 元 素 在 基本 体验 具有 更 加 紧凑 和 易于 阅读 的 格式 ， 还 
能 提供 相同 的 约束 。 用 户 做 出 选择 时 , 被 选中 的 选项 会 与 标签 组 合 在 一 起 , 形成 一 段 易 于 阅读 的 
短语 ( 比如 “有 地 铁 站 : 较为 重要 ”)， 如 图 16-4 所 示 。 
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Amenity Preferences 


Subway access: | Notimportant 上 | 





Water views: | Notimportant ES 


Walking path ETT TT TET 


Somewhat important 
Pretty important 
Must have 

















ml 








图 16-4 ”基本 体验 里 用 于 生活 便利 设施 偏好 的 下 拉 列 表 框 


让 select 在 增强 体验 的 页 面 上 保持 可 见 没 有 什么 益处 ， 因 为 滑 块 能 完全 取代 select 的 功能 。 
在 这 个 案例 里 ， 我 们 会 隐藏 原 有 的 select， 然 后 在 滑 块 右边 显示 当前 所 选 值 的 文字 反馈 信息 。 因 
为 滑 块 本 身 也 能 向 屏幕 阅读 器 用 户 传 达 自 己 的 值 ， 所 以 对 这 些 用 户 我 们 会 用 ARIA 来 隐藏 可 见 的 
文字 反馈 信息 ， 以 避免 重复 ， 如 图 16-5 所 示 。 
































Walking paths: 人) Not important 











图 16-5 ”增强 体验 里 的 select 是 隐藏 的 ， 被 文字 反馈 信息 取代 


一 个 真正 可 用 的 请 块 控 件 必 须 能 同时 顺利 地 实现 鼠标 和 键盘 操作 ,并且 需 要 精心 设计 操作 巡 
辑 来 优雅 地 处 理 拖 放 功能 。 与 其 从 头 创建 一 个 滑 块 , 不 如 借用 jQuery UI 库 里 包含 的 这 个 健壮 的 滑 
块 (http://jqueryui.com/docs/slider ) 来 节省 时 间 和 开发 投入 。 这 里 也 会 使 用 它 。 

对 某 个 input 或 select 元 素 调用 我 们 的 增强 脚本 时 ， 它 会 充当 类 似 中 间 人 的 角色 ， 解 析 基 础 
标记 并 找 出 配置 jQuery UI 滑 块 所 需 的 值 ,之 后 , jQuery UI 滑 块 插件 会 插入 增强 标记 来 生成 滑 块 轨 

道 和 手柄 ， 应 用 拖 动 吸附 ( drag and snap ) 行为 ， 根 据 手柄 运动 计算 值 的 变化 ， 以 及 文 持 键盘 操 
作 。 

我 们 的 插件 脚本 会 通过 添加 ARIA 支 持 来 完善 jQuery UI 滑 块 插件 的 能 力 ， 写 作 本 书 时 的 
jQuery UI 版 本 尚未 包括 这 一 点 (但 是 快 了 )。 最 后 ， 它 会 作为 代理 ， 确 保 数 据 值 的 任何 变化 都 能 
在 增强 滑 块 和 原生 input 与 select 元 素 之 间 传 递 。 

计划 好 如 何 处 理 基本 体验 里 的 各 种 滑 块 功能 之 后 ， 就 可 以 着 手 开发 我 们 的 自 定 义 滑 块 了 。 

















HTML5 的 input type=range 元 素 : 未 来 的 原生 滑 块 
HTML5 规 范 给 input 元 素 添加 了 一 个 新 的 type=range 属 性 , 用 于 收集 “ 非 精确 性 ”数值 ( 这 
是 W3C 对 “ 滑 决 ”的 叫 法 )。 最 新 版 的 Opera 和 Webkit 浏 览 器 已 经 能 把 这 个 类 型 的 input 泻 当成 
一 个 滑 块 ， 因 此 对 这 个 原生 滑 块 的 浏览 器 支持 正在 慢 慢 普及 "。 





GD IE 10、Firefox 23 、Chrome4、Safari3.1、Opera9 、iOS Safari 5s、Android 4.2 及 之 后 版 本 的 浏览 器 都 支持 这 个 类 型 。 
一 一 译 者 注 
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从 技术 上 看 ， 你 可 以 安全 地 在 今天 的 基础 标记 里 指定 type=range 的 input。input 元 素 会 在 未 
提供 类 型 或 者 类 型 未 知 时 默认 使 用 text 类 型 。 你 需要 注意 的 仅仅 是 从 设计 的 角度 看 ，Opera 和 
Safari 浏 览 器 泻 染 range input 滑 块 的 方式 有 着 巨大 的 区 别 , 无 论 从 功能 还 是 外 观 上 来 说 都 是 如 此 。 
与 其 说 这 个 元 素 可 以 安全 使 用 , 倒 不 如 说 它 感 觉 更 像 是 一 种 实验 性 的 元 素 。 我 们 期 待 在 未 来 的 某 
一 天 可 以 用 一 致 的 方式 使 用 这 些 滑 块 ， 如 图 16-6 所 示 。 


一 


























图 16-6 最 新 版 的 Safari( 上 ) 和 Opera ( 中) 浏览 器 为 range input 泻 染 出 的 原生 滑 块 。 
火狐 浏览 器 (下 ) 则 显示 出 一 个 标准 的 文本 input， 因 为 它 不 支持 range 类 型 








16.2 创建 滑 块 


构建 公寓 搜索 工具 滑 块 的 第 一 步 是 创建 在 基本 体验 里 获取 数据 值 的 基础 标记 。 然后, 为 有 能 
力 的 浏览 器 创建 用 于 交互 式 滑 块 的 增强 标记 , 并 编写 一 些 脚本 来 应 用 它们 的 行为 , 以 及 让 数据 在 
滑 块 与 input 元 素 之 间 保 持 同 步 。 


16.2.1 基础 标记 和 样式 


对 一 开始 的 三 个 字段 ， 使 用 数字 ;input 元 素 ， 对 后 三 个 则 使 用 select 元 素 。 我 们 会 给 它们 各 
自 添加 关联 的 1abel 标 签 ， 并 放置 在 一 个 form 里 以 便 提交 。 

16.1 节 提 到 ， 每 个 数字 形式 的 数据 字段 (最 高 租金 价格 、 卧 室 数量 和 卫生 间 数 量 ) 都 会 编写 
成 一 个 类 型 为 HTML5 type=number 的 input， 并 加 上 min 和 max 属 性 以 及 它们 的 值 。 我 们 会 给 input 
预先 生成 一 个 初始 的 默认 值 ,并 指定 一 个 size 属 性 ,这 个 属性 用 一 种 灵活 的 方式 来 告诉 浏览 顺应 
该 按照 某 种 宽度 显示 input ， 这 个 宽度 需要 能 人 够 容纳 某 一 特定 的 字符 数量 以 符合 可 接受 的 数据 限 
制 条 件 。 

<input type="number" name="price" id="price" value="2000" min="0" max="5000" size="4" /> 

为 了 增加 一 点 额外 的 意义 , 利用 它们 在 增强 体验 里 给 屏幕 阅读 器 提供 更 明确 的 反馈 , 我 们 会 
使 用 HTML5 的 data- 前 缀 创建 一 个 名 为 data-units 的 自 定义 属性 ， 用 它 来 指定 input 中 值 的 单位 
(在 这 个 案例 里 是 美元 )。 这 样 给 移动 的 滑 块 设 置 aria-valuenow ( 当前 值 ) 属性 后 ， 它 就 会 朗读 
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出 更 人 性 化 的 “1500 美 元 ”"， 而 不 仅仅 是 里 面 的 数值 “1500”。 我 们 还 会 使 用 反馈 文字 来 填充 滑 块 
手柄 的 title 属 性 ， 它 在 大 多 数 浏览 顺 里 会 被 泻 染 成 一 条 工具 提示 : 


<input type="number" name="price" id="price" value="2000" min="0" 
max="5000" size="4" data-units="dollars" /> 


为 每 个 ijnput 都 创建 一 个 标签 ， 并 用 for 属 性 把 它 正 确 关联 到 带 有 相 匹 配 id 的 input 上 : 


<label for="price">Max Rent ($):</label> 
<input type="number" name="price" id="price" value="2000" min="0" 
max="5000" size="4" data-units="dollars" /> 


卧室 和 卫生 间 数 量 input 的 标记 也 会 用 同样 的 方式 组 建 ， 包 括 正 确 关 联 的 标签 ， 以 及 恰当 的 
min 、max、size 和 data-units 值 。 
三 个 生活 便利 设施 方面 的 滑 块 在 基础 标记 里 会 用 select 元 素 编写 ,并 同样 关联 1abel 的 for 
性 和 select 的 id， 就 像 这 样 : 
<label for="subway">Subway access:</label> 
<select name="subway" id="subway"> 
<option value="0">Not important</option> 
<option value="1">Somewhat important</option> 
<option value="2">Pretty important</option> 


<option value="3">Must have</optiony> 
</select> 


这 些 select 滑 块 里 的 option 值 本 身 已 经 是 完整 和 可 阅读 的 ， 也 天 生 带 有 约束 性 ， 所 以 不 需要 
给 它们 添加 额外 的 属性 。 

定义 完备 个 表单 字段 的 基本 标记 后 , 我 们 将 在 基本 样式 表 里 应 用 一 种 全 局 字体 , 使 基本 体验 
看 起 来 更 美观 一 些 : 


body, input { font-family: "Segoe UI", Arial, sans-serif; } 




















al 

















16.2.2 ”增强 标记 和 样式 


前 面 提 到 ， 我 们 会 让 jQuery UI 滑 块 插件 负责 生成 增强 标记 ， 并 给 标记 里 所 有 指定 为 滑 块 的 
元 素 应 用 滑 块 行为 。 

jQuery UI 滑 块 会 生成 一 个 锚 链 接 作 为 请 块 手柄 ， 然 后 把 它 放 在 一 个 当 作 轨 道 的 div 内 。 拖 动 
滑 块 手柄 时 ,脚本 会 动态 设置 锚 上 的 内 联 样式 , 通过 把 CSS left 属 性 设置 成 轨道 最 大 值 的 某 个 百 
分 比 反 映 出 手柄 当前 的 位 置 : 


<div class="ui-slider ui-slider-horizontal"> 
<a href="#" class="ui-slider-handle" style="left:40%"></a> 
</div> 

















注意 为 了 清楚 起 见 , 我 们 省 略 了 jQuery UI 滑 块 标记 里 的 一 些 类 , 它们 的 作用 是 应 用 某 个 jQuery 
UI 主题 。 





248 第 16 章 滑 块 








我 们 的 增强 脚本 需要 添加 许多 ARIA 属 性 使 滑 块 可 访问 。 无 论 基础 标记 是 数字 类 型 的 input 
是 select， 这 些 属性 都 是 一 样 的 。 
首先 ， 给 body 元 素 添 加 一 个 值 为 application 的 ARIA role 属 性 ， 使 屏幕 阅读 器 能 够 识别 出 这 
个 请 块 控件 ， 并 遵循 我 们 指派 的 那些 自 定 义 键 盘 快 捷 方 式 : 
<body role="application"> 
然后 , 脚本 会 给 充当 滑 块 手柄 角色 的 锚 链 接 指 派 许多 ARIA 属 性 。( 因为 手柄 承担 了 滑 块 的 所 
有 交互 功能 ， 而 轨道 主要 用 来 提供 视觉 反馈， 所 以 各 种 ARIA 角 色 都 会 放 在 锚 链 接 上 。 ) 
锚 元 素 上 一 个 名 为 slider 的 role 告 诉 屏幕 阅 读 顺 它 扮演 滑 块 控件 的 角色 ， 而 不 是 普通 的 链 
接 ， 这 样 在 链接 获得 焦点 时 它 就 会 朗读 出 关于 该 控件 的 一 段 描述 : 
<div class="ui-slider ui-slider-horizontal" role="application"> 


<a href="#" class="ui-slider-handle" role="slider" style="left:40%"></a> 
</div> 


利用 aria-labelledby 属 性 可 以 关联 滑 块 与 页 面 上 某 个 描述 它 的 元 素 。 向 滑 块 提供 数据 并 在 
数据 改变 时 与 其 同步 的 原生 基础 元 素 ( 在 这 个 案例 里 是 input 元 素 ) 在 网 页 里 已 经 有 了 一 个 关联 
的 label, 这 个 标签 同样 能 准确 地 描述 滑 块 。 在 增强 体验 里 , 可 以 使 用 input 元 素 的 label 充 当 滑 块 
的 标签 。aria-labelledby 属 性 必须 通过 id 来 引用 别 的 元 素 ， 因 此 用 JavaScript 给 标签 生成 一 个 唯 
一 的 id， 方法 是 使 用 其 for 属 性 的 值 ， 然 后 加 上 一 个 -1abel 后 级 : 

<label for="price" id="price-label">Max Rent ($):</label> 

然后 用 同一 个 ID 生成 滑 块 锚 链 接 上 的 aria-labelledby 属 性 ， 这 样 就 能 使 它 关 联 label 元 素 ， 
以 服务 屏幕 阅读 需 用户 : 

<div class="ui-slider ui-slider-horizontal" role="application"> 

<a href="#" class="ui-slider-handle" role="slider" aria-labelledby= 


"price-label" style="left:40%"></a> 
</div> 


aria-valuemin 和 aria-valuemax 属 性 标明 了 滑 块 控件 的 最 小 值 和 最 大 值 。 同 样 ， 我 们 会 借用 
基础 标记 里 的 值 ， 对 各 个 input 用 的 是 它 的 min 和 max 属 性 ，select 则 是 它 的 第 一 和 最 后 一 个 值 : 


<div class="ui-slider ui-slider-horizontal" role="application" 
style="left:40%"></a> 
<a href="#" class="ui-slider-handle" role="slider" aria-valuemin="0" 
aria-valuemax="5000" aria-labelledby="price-label" style="left:40%"></a> 
</div> 


最 后 , 每 当 滑 块 手柄 移动 或 者 它 关 联 的 表单 字段 值 发 生变 化 , 就 用 脚本 来 动态 更 新 两 个 额外 
的 ARIA 属 性 : aria-valuenow ( 滑 块 的 当前 数字 值 ) 和 aria-valuetext ( 供 屏 幕 阅读 器 朗读 的 人 
性 化 数值 反馈 文字 )。 这 一 过 程 对 我 们 的 两 个 基础 元 素 稍 有 不 同 。 在 基于 select 的 滑 块 上 ， 将 
option 里 的 文本 填 人 data-units 属 性 。 为 了 让 aria-valuetext 对 数字 类 型 的 input 更 有 用 ， 我 们 的 
脚本 会 给 当前 的 input 值 ( 2000 ) 加 上 基础 标记 里 的 data-units 属 性 字符 串 (“dollars”)， 以 改进 
听觉 反馈 (“2000 dollars”): 
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<div class="ui-slider ui-slider-horizontal" role="application"> 


<a href="#" class="ui-slider-handle" role="slider" aria-valuemin="0" 
aria-valuemax="5000" aria-valuenow="2000" aria-valuetext="2000 dollars" 
aria-labelledby="price-label" style="left:40%"></a> 


</div> 

可 以 借助 一 个 ARIA 属 性 来 改善 非 屏幕 阅读 器 用 户 的 体验 。 我 们 的 增强 脚本 会 用 aria- 
valuetext 属 性 里 的 反馈 文字 给 手柄 链接 生成 一 个 title 属 性 ， 它 会 被 泻 染 成 一 条 描述 性 的 工具 提 
示 。( 这 不 是 必需 的 ， 而 是 一 项 “锦上添花 ”的 功能 ， 因 为 这 些 滑 块 input 在 页 面 上 仍然 可 见 。) 


<div class="ui-slider ui-slider-horizontal" role="application"> 














dl 























<a href="#" class="ui-slider-handle" role="slider" aria-valuemin="0" 
aria-valuemax="5000" aria-valuenow="2000" aria-valuetext="2000 dollars" 
aria-labelledby="price-label" title="2000 dollars" style="left:40%"></a> 


</div> 

使 用 相同 的 标记 结构 来 创建 其 余 的 网 页 控件 滑 块 。 在 草拟 出 具备 ARIA 功 能 的 增强 标记 之 后 ， 
现在 编写 增强 样式 ， 让 jQuery UI 滑 块 的 外 观 接近 我 们 的 目标 设计 。 

1. 用 于 增强 体验 的 CSS 

首先 , 给 滑 块 容器 添加 样式 , 它 在 我 们 的 设计 里 用 来 给 滑 块 手柄 提供 一 条 轨道 它 有 固定 的 
宽度 和 高 度 , 一 张 用 来 给 轨道 增加 一 点 渐变 质感 的 背景 图 像 ， 圆 化 的 边 角 和 一 个 边框 。 它 还 是 相 
对 定位 的 ， 证 滑 块 手柄 和 range 类 型 的 input 元 素 能 它 里 面 绝 对 定位 。 


.Ui-slider { 
position:relative; 
top: .8em; 
float: left; 
width:293px; 
height:1em; 
background:#ebebec url(../images/bg-slider.png) top repeat-x; 
border:1px solid #aaa; 
-moz-border-radius: .5em; 
-webkit-border-radius:.5em; 
border-radius: .5em; 


} 
我 们 的 滑 块 轨道 及 其 标签 如 图 16-7 所 示 。 

















Subway access: 








图 16-7 添加 样式 后 的 滑 块 轨道 
滑 块 手柄 借助 负 的 top 和 margin-left 属 性 进行 绝对 定位 ， 使 它 居 中 处 于 轨道 上 方 。 我 们 给 它 
添加 样式 的 方法 是 使 用 width 和 height 属 性 创建 一 个 方块 ， 然 后 给 它 一 个 实 线 边 杠 、 一 张 背景 图 
像 ， 以 及 CSS3 的 border-radius 属 性 来 圆 化 边 角 ， 使 手柄 看 起 来 像 一 个 圆 ( 这 个 属性 并 不 能 得 到 
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所 有 浏览 器 的 支持 ,但 它 能 安全 地 降级 ): 


.Ui-slider .ui-slider-handle { 
position:absolute; 
z-index:2; 
width:1.6em; 
height:1.6em; 
top:-.5em; 
margin-left:-.8em; 
cursor:pointer; 
border:2px solid #444; 
background:#fff url(../images/bg-slider-handle.png) 50% repeat-x; 
-moz-border-radius: .9em; 
-webkit-border-radius: .9em; 
border-radius: .9em; 


添加 上 这 些 样 式 后 ， 滑 块 手柄 如 图 16-8 所 示 。 








Subway access: O 














图 16-8 添加 样式 后 的 请 块 手柄 和 轨道 


为 了 在 用 户 鼠 标 悬 停 或 利用 键盘 使 滑 块 手柄 获得 焦点 时 创建 视觉 反馈 , 给 hover 和 focus 状 态 应 
用 一 张 不 同 的 背景 图 像 。 在 激活 状态 下 ( 点 击 或 着 按键 ), 我 们 会 移 除 背 景 图 像 , 留 下 平 白 的 外 观 。 


.Ui-slider .ui-slider-handle:hover, .ui-slider .ui-slider-handle:focus { 
background-image:url(../images/bg-slider-handle-hover.png); 


} 


.Ui-slider .ui-slider-handle:active { 
background-image:none; 
} 
对 最 大 租金 这 样 的 数字 型 input 滑 块 ， 我们 会 利用 jQuery UI 滑 块 里 的 range-min 选 项 。 这 个 选 
项 会 用 颜色 填充 从 滑 块 轨道 左边 缘 到 手柄 当前 位 置 这 一 段 范围 〈 就 像 一 个 温度 计 )， 使 这 部 分 突 
出 显示 ,从 而 在 视觉 上 提示 用 户 他 们 正在 选择 所 选 值 尺 下 的 所 有 租金 价格 或 卧室 数量 ， 而 不 仅仅 
是 连续 区 间 里 的 单个 点 。 局 用 这 个 选项 后 ， 插 件 会 给 滑 块 脚本 添加 一 个 额外 的 div 元 素 ， 并 动态 
设置 一 个 内 联 的 width 百分比 样式 来 匹配 手柄 的 位 置 : 
<div class="ui-slider ui-slider-horizontal"> 
<div class="ui-slider-range ui-slider-range-min" width="42%"></div> 


<a href="#" class="ui-slider-handle" style="left:42%"></a> 
</div> 


我 们 会 给 这 个 范围 div 添 加 深 色 背 景 图片 的 样式 , 使 滑 块 轨道 看 起 来 像 一 直 填 色 到 手柄 的 位 置 : 


.Ui-slider .ui-slider-range { 
position:absolute; 
z-index:1; 
font-size: .7em; 
display:block; 
border:0; 
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top:0; 

height:100%; 

background:#999 url(../images/bg-slider-range.png) 50% repeat-x; 
left:0; 

} 

我 们 的 数字 型 范围 滑 块 现在 就 有 了 一 段 填充 色 ， 让 人 能 更 清楚 地 看 出 选中 的 是 一 个 最 大 值 ， 
它 下 面 的 所 有 值 都 在 选择 范围 之 内 。 

给 数字 型 input 添 加 样式 使 它们 看 上 去 可 编辑 ， 因 为 除了 滑 块 ， 用 户 也 可 以 使 用 它们 ， 如 图 
16-19 所 示 。 在 源 代 码 顺 序 里 ， 滑 块 的 div 处 于 input 前 面 ， 将 两 者 设置 成 float :left 会 让 各 个 滑 块 
出 现在 其 对 应 input 的 左 侧 。 把 font-weight 设 置 为 bold， 指 定 边框 的 颜色 ， 并 使 用 CSS3 的 
border-radius 属 性 来 圆 化 input 的 边 角 : 

input#price, input#bedrooms, input#baths { 

float: left; 

font-size:1.3em; 
font-weight:bold; 

width:55px; 

border:1px solid #ccc; 
-moz-border-radius:3px; 
-webkit-border-radius:3px; 
border-radius:3px; padding: .2em; 












































Max Rent ($): mm ) 2000 


图 16-9 ”数字 型 消 块 带 有 一 段 从 轨道 左 端 到 手柄 的 填充 色 ， 右 边 放置 了 数字 型 input 


对 三 个 生活 便利 设施 滑 块 ， 用 CSS 把 它们 的 select 元 素 隐 藏 到 屏幕 之 外 ， 同 时 在 网 页 中 保留 
它们 用 来 提交 表单 。 我 们 的 增强 脚本 会 给 这 些 元 素 指 派 ARIA 的 aria-hidden=true 属 性 , 从 而 更 好 
地 支持 具备 ARIA 功 能 的 屏幕 阅读 器 ， 告 诉 它 们 这 些 select 元 素 是 隐藏 的 。 


select#subway, select#water, select#walking { 
display: none; 


























为 了 给 生活 便利 设施 滑 块 里 的 值 提供 视觉 反馈 ， 脚 本 会 在 滑 块 后 面 放 一 个 带 有 slider- 
status 类 的 反馈 div, 然后 用 当前 的 值 动态 更 新 它 。 给 这 个 div 应 用 一 个 值 为 true 的 aria-hidden 属 
性 ， 让 它 对 屏幕 阅读 器 隐藏 ， 因 为 反馈 文字 和 滑 块 本 身 的 aria-valuetext 属 性 信息 是 重复 的 。 

<div class="slider-status" aria-hidden="true">Pretty important</div> 

将 这 些 反馈 div 元 素 与 滑 块 一 起 添加 样式 , 类 似 于 给 一 开始 的 三 个 滑 块 添加 input 元 素 样 式 的 
做 法 ， 如 图 16-10 所 示 。 


.Slider-status { 
float:1left; 
font-weight:bold; 
font-size:1.5em; 
Color:#444; 

} 
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Subway access: © Pretty important 














图 16-10 ”添加 样式 后 的 生活 便利 设施 滑 块 ， 带 有 当前 选择 的 反馈 信息 


最 后 , 在 生活 便利 设施 滑 块 的 上 方 添加 一 个 图 例 , 说 明 选 择 范 围 是 从 不 重要 到 必须 要 有 ， 如 
图 16-11 所 示 。 


























Not important Must have 
ER ”== 











图 16-11 生活 便利 滑 块 的 图 例 


用 JavaScript 插 入 图 例 的 标记 。 它 的 文字 内 容 由 第 一 个 select 沫 单 ( 因为 所 有 生活 便利 设施 滑 
块 的 选项 都 相同 ， 它 也 不 例外 ) 里 的 第 一 和 最 后 一 个 文本 值 生成 ,然后 再 给 它 添加 一 张 背 景 图 像 
来 形成 颜色 渐变 区 间 : 


<div class="sliders-labels"> 
<span class="label-first">Not important</span> 
<span class="label-last">Must have</span> 
</div> 


图 例 标 记 的 作用 只 是 提供 视觉 反馈 ， 所 以 应 用 一 个 值 为 true 的 aria-hidden 属 性 ， 告 诉 屏 幕 
阅读 器 这 个 div 没 有 意义 。 
<div class="sliders-labels" aria-hidden="true"> 
<span class="label-first">Not important</span> 


<span class="label-last">Must have</span> 
</div> 


最 后 ,我们 会 给 图 例 添加 样式 ， 让 它 更 像 我 们 的 目标 设计 : 


.Sliders-labels { 
height:2em; 
margin-left:145px; 
width:293px; 
background:url(../images/bg-continuum.png) bottom left no-repeat; 
padding-top:1em; 























.Sliders-labels span.label-first { 
float:1left; 


.Sliders-labels span.label-last { 


float:right; 
} 


16.2.3” 滑 块 脚本 


用 jQuery UI 的 滑 块 插 件 来 生成 实际 的 滑 块 控件 ， 因 此 增强 脚本 会 扮演 桥梁 的 角色 ， 人 负责 将 
基础 标记 解析 成 滑 块 能 够 使 用 的 格式 ,管理 ARIA 属 性 的 添加 和 更 新 ,并 确保 滑 块 与 input 或 select 
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的 值 在 任何 时 候 都 保持 同步 。 网 页 则 需要 同时 引用 jQuery 和 jQuery UI 这 两 个 库 。 
注意 jQuery UI 库 和 滑 块 这 样 的 组 件 专用 插件 可 以 在 http://jqueryui.com/download 上 下 载 。 


我 们 的 脚本 在 处 理 数 字 型 input 滑 块 和 定性 的 select 滑 块 时 使 用 不 同 的 方法 。 这 里 会 介绍 
理 每 种 滑 块 的 步 又 。 

1. 生成 基于 ;input 的 滑 块 

为 了 根据 数字 型 input 元 素 生 成 滑 块 , 增强 脚本 要 做 的 第 一 件 事 是 遍历 网 页 上 的 各 个 input 元 
素 ， 收 集 生 成 滑 块 所 需 的 标签 、 值 和 其 他 信息 : 


$('#price, #bedrooms, #baths').each(function(){ 
// 这 里 放 的 是 用 于 每 个 input 的 代码 ……… 
]); 


在 each 循 环 里 ， 脚 本 首先 会 生成 对 循环 里 当前 input 的 引用 ， 然 后 给 labe1 元 素 生成 并 应 
个 id， 保 存 来 自 data-units 属 性 的 单位 名 称 ， 并 创建 一 个 变量 来 储存 人 性 化 的 反馈 文字 ， 这 些 文 
字 会 用 作 ARIA 和 滑 块 手柄 的 工具 提示 : 


// 保 存 对 input 元 素 的 引用 
var input = $(this); 


新 











// 找 到 关联 的 label 元 素 
var thisLabel = $('label[for=" + input.attr('id'’) + ']'); 


// 使 用 它 的 for 属 性 + 'label' 来 生成 它 的 唯一 ID 
thisLabel.attr('id', thisLabel.attr('for') + '-label'); 


// 从 自 定义 的 data 属 性 里 获取 input 的 单位 
var thisUnits = input.attr('data-units'); 


// 获 得 input 的 值 ， 创 建 一 个 包含 单位 的 人 性 化 版 本 
var friendlyVal = input.val() + " ' + thisUnits; 
为 了 确保 屏幕 阅读 器 用 户 能 用 键盘 控制 滑 块 ， 给 body 元 素 应 用 一 个 名 为 application 的 role: 
$('body').attr('role','application' ); 
接 下 来 ， 脚 本 会 添加 一 个 div， 供 jQuery UI 捕 件 插入 滑 块 的 标记 : 
var slider = $('<div></div>'); 
这 个 div 会 被 插入 到 网 页 中 , 位 置 是 input 之 前 。( 通常 我 们 会 在 创建 出 控件 之 后 再 做 这 一 步 ， 
但 是 滑 块 插件 要 求 网 页 里 先 有 标记 ， 然 后 才能 进行 配置 。) 
slider.insertBefore(input); 
然后 就 可 以 初始 化 各 个 滑 块 , 传递 键 / 值 对 形式 的 选项 到 jQuery UI 滑 块 的 API, 选项 之 间 用 去 
分 隔 。 设 置 min 和 max 选 项 ， 值 分 别 来 自 各 个 input 的 min 和 max 属 性 。 滑 块 的 初始 值 用 value 选 项 
行 设 置 , 该 值 从 input 的 value 里 获取 并 解析 成 一 个 数字 。range 选 项 可 以 设置 一 段 视 觉 高 亮 , 具 
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体 范围 可 以 是 两 个 滑 块 手柄 之 间 ， 也 可 以 是 从 某 个 手柄 到 滑 块 的 末端 。 我 们 把 范围 设 成 min， 这 
是 告诉 插件 要 创建 一 个 从 滑 块 起 点 到 手柄 的 范围 元 素 。 最 后 ，step 选 项 设置 了 滑 块 手柄 移动 的 增 
量 ， 我 们 会 使 用 一 种 称 为 三 元 运算 符 ( ternary operator ) 的 特殊 条 件 语 句 ， 如 果 当 前 input 的 id 是 
price， 就 把 step 选 项 设 为 50， 和 否则 就 设 为 1: 
slider.slider({ 

min: input.attr('min'), 

max: input.attr('max'), 

value: parseInt(input.val(),10), 

Tange: 'min', 


step: input.is('#price') ? 50 : 1 


}); 

根据 这 些 信 息 ，jQuery UI 插件 会 创建 出 功能 完整 的 滑 块 控件 ， 并 将 它 插入 文本 input 之 前 的 
div 中 。 

滑 块 能 正常 工作 之 后 , 给 它 添加 ARIA 属 性 , 使 它 对 屏幕 阅读 器 用 户 更 具有 意义 , 也 更 可 用 : 









































slider 
.find('a') 
.attr({ 
'role': 'slider', 
"aria-valuemin': input.attr('min'), 
"aria-valuemax': input.attr('max'), 
"aria-valuenow': input.val()， 
"aria-valuetext': friendlyVal, 
"aria-labelledby': thisLabel.attr('id'), 
'title': friendlyVal 
}); 


各 个 滑 块 更 新 时 也 应 该 同步 更 新 原来 的 input 元 素 。 我 们 会 利用 滑 块 插件 的 自 定义 slide 事 
件 ， 每 当 滑 块 的 当前 值 发 生变 动 时 就 用 它 来 更 新 input: 
// 给 滑 块 绑 定 一 个 自 定义 的 slide 事 件 (slide 是 jQuery UI 里 的 一 个 事件 ) 
slider.bind('slide', function(e, ui){ 
// 设 置 input 的 值 为 滑 块 的 值 
input.val(ui.value); 








// 得 到 人 性 化 的 值 
friendlyVal = input.val() + ' ' + thisUnits; 


// 更 新 滑 块 手柄 的 属性 值 
slider.find('a').attr({ 
'aria-valuenow': input.val(), 
"aria-valuetext': friendlyVal, 
'title': friendlyVal 
}); 
}); 


我 们 还 想 让 input 能 反 癌 通知 滑 块 控件 , 在 用 户 给 input 字 上 段 输 入 某 个 值 后 更 新 滑 块 手柄 的 位 
置 ,为 此 ,再 次 使 用 这 个 插件 的 slider 方 法 ,我 们 提供 的 第 一 个 参数 是 要 更 新 的 滑 块 选项 ( value )， 
第 二 个 选项 则 是 input 的 当前 值 : 
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input.keyup(function(){ 
slider.slider('value', parseInt($(this).val(),10)); 


}); 

现在 ， 我 们 有 了 一 个 根据 标准 input 构 建 的 滑 块 ， 以 及 一 套 让 两 者 保持 同步 的 方法 。 提 交 表 
单 时 ， 各 个 input 的 值 随 表单 数据 发 送 的 方式 在 基本 体验 和 增强 体验 里 都 是 相同 的 。 

2. 生成 基于 select 的 滑 块 
通过 解析 基础 HIML 来 初始 化 select 滑 块 组 件 的 基本 步骤 和 之 前 的 input 非 常 相似 ， 但 是 
select 用 到 的 方法 和 语法 稍 有 不 同 。 

第 一 步 是 遍历 各 个 需要 生成 滑 块 的 select: 


$('#subway, #water, #walking').each(function(){ 
// 用 于 各 个 Select 元 素 的 代码 
]); 


在 each 循 环 里 ， 脚 本 会 创建 一 个 变量 来 引用 当前 的 select 元 素 ， 给 这 个 select 应 用 
aria-hidden=true， 给 1abel 元 素 生 成 并 应 用 一 个 id， 获 得 用 于 当前 所 选 option 的 文本 ,然后 创建 
一 个 用 来 容纳 滑 块 的 div: 


// 引 用 当前 的 Select 元素 
var select = $(this); 












































// 对 启用 ARIA 的 屏幕 阅读 器 隐藏 该 Select 元 素 
select.attr('aria-hidden','true' ); 


// 保 存 对 关联 标签 的 引用 
var thisLabel = $('label[for=' + select.attr('id') + ']'); 


// 使 用 它 的 for 属 性 + `-1label` 来 生成 它 的 唯一 ID 
thisLabel.attr('id', thisLabel.attr('for') + '-label'); 


// 找 到 人 性 化 的 值 

var friendlyVal = select.find('option ') 
.eq( select[0].selectedIndex ) 
.text(); 


// 创 建制 作 滑 块 所 需 的 div 
var slider = $('<div></div>'); 


滑 块 的 div 会 插入 到 select 元 素 之 前 : 

slider.insertBefore(select); 

脚本 然后 会 在 div 上 调用 jQuery UI 的 slider 方 法 ,传递 最 小 值 、 最 大 值 和 当前 值 这 三 个 配置 
选项 来 创建 一 个 滑 块 。min 和 max 选 项 指 的 是 select 选 项 的 第 一 个 和 最 后 一 个 序号 (从 o 开 始 )。 当 
前 值 的 获取 方法 是 检查 原始 select 元 素 里 选中 的 option。 将 step 选 项 设 为 1， 因 为 select 里 的 每 一 
个 option 都 必须 体现 在 滑 块 里 。 


slider.slider({ 
min: 0， 
max: select.find('option').length-1, 
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value: select[0].selectedIndex, 
step: 1 


)); 
我 们 给 这 个 滑 块 添加 的 ARIA 属 性 与 之 前 给 input 滑 块 添加 的 属性 相同 , 这 些 属 性 让 所 
俐 能 够 访问 滑 块 : 

















阅读 


El 
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slider 

.find('a') 

.attr({ 
'role': 'slider', 
"aria-valuemin': 0， 
'aria-valuemax': select.find('option').length-1, 
'aria-valuenow': select[0].selectedIndex, 
"aria-valuetext': friendlyVal, 
'title': friendlyVal, 
'aria-labelledby': thisLabel.attr('id') 

}); 


因为 select 被 隐藏 了 了 ， 所 以 接 下 来 插入 一 个 带 有 当前 值 的 div 作 为 视觉 反馈 。 我 们 还 会 绑 定 
(pind ) 插件 的 slide 事 件 来 监视 滑 块 手柄 位 置 的 变化 ， 并 在 滑 块 值 发 生变 动 时 做 两 件 事 : 更 新 原 
台 select 上 的 选中 值 ， 然 后 用 人 性 化 的 值 来 更 新 反馈 div 里 的 文本 。 还 会 应 用 aria-hidden 属 性 防 
止 屏幕 阅读 需 用 户 重复 获取 可 以 在 select 的 ARIA 属 性 上 得 到 的 值 。 


// 在 滑 块 后 面 追加 状态 div 
slider.after('<div class="slider-status" aria-hidden="true">'+friendlyVal + “</div> ); 

















加 





// 绑 定 sLide 事 件 

slider.bind('slide', function(e, ui){ 
// 设 置 下 拉 菜 单 的 值 来 匹配 滑 块 
select[0].selectedIndex = ui.value; 


// 得 出 人 性 化 的 值 
friendlyVal = select.find('option') 
.eq( select[0].selectedIndex ) .text() 


// 填 入 反馈 div 
slider.next().text(friendlyVal); 


// 给 滑 块 手柄 应 用 属性 
slider.find('a').attr({ 
"aria-valuenow': select[0].selectedIndex, 
"aria-valuetext': friendlyVal,] 
'title': friendlyVal 
}); 
}); 


最 后 ,脚本 会 插入 所 需 的 静态 标记 来 构建 范围 图 例 的 图 像 和 标签 ,这 些 图 例 用 颜色 进行 编码 : 


// 生成 图 例 标记 
$('<div class="sliders-labels" aria-hidden="true"><span class="label-first">'+ 
$('#subway option:first').text() + 


mr 


'</span><span class="label-last">'+ 
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$('#subway option:1last' ) .text() + 
'</span></div>') 
// 插入 到 第 一 个 滑 块 之 前 
.insertBefore('label[for=subway] '); 
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本 书 附带 的 滑 块 演示 和 代码 (位 于 www.filamentgroup.com/dwpe ) 包含 了 jQuery.peSlider.js， 
这 个 脚本 把 本 章 概述 的 渐进 增强 滑 块 功能 包装 成 一 个 可 以 重复 使 用 的 插件 .peSlider 脚 本 是 jQuery 
UI 滑 块 插件 的 一 个 “包装 器 ”， 它 同时 依赖 于 jQuery 和 jQuery UI 库 。 

要 在 你 的 网 页 里 使 用 这 个 脚本 , 请 下 载 并 引用 滑 块 演示 页 里 列 出 的 那些 文件 , 然后 在 其 个 数 
字 型 input 或 select 元 素 ( 以 及 两 者 的 任意 组 合 ) 上 调用 peslider 方 法 。 利 用 这 个 插件 ， 用 一 条 
jQuery 语句 就 能 创建 演示 页 里 的 所 有 滑 块 ， 比 如 下 面 这 人名: 

$('#price, #bedrooms, #baths, #subway, #water, #walking').peSlider(); 

调用 peSlider 方 法 会 创建 一 个 jQuery UI 滑 块 , 它 具 备 所 有 的 数据 和 代理 逻辑 来 同步 原生 元 素 
到 滑 块 上 ， 还 有 自动 计算 的 默认 增 量 ， 以 及 所 有 用 于 可 访问 性 的 ARIA 属 性 。 

在 上 面 的 例子 里 ,， 有 3 个 自 定义 选项 默认 不 包括 在 jQuery UI 滑 块 插件 和 peSlider 择 件 里 : 给 滑 
块 轨道 添加 高 亮 填 色 来 显示 选中 区 域 的 range 选 项 ; 设置 自 定义 增 量 的 修改 版 step 选 项 ; 在 select 
滑 块 右 侧 显示 当前 选中 值 文字 反馈 的 div。 针 对 这 些 具 体 的 示例 ， 需 要 给 peSlider 方 法 传递 配置 
选项 ， 或 者 用 jQuery 手动 生成 某 些 标记 。 下 面 的 份子 会 逐步 展示 如 何 用 peSlider 分 别 实现 这 些 

最 前 面 的 三 个 input 滑 块 使 用 范围 反馈 元 素 ， 它 突出 显示 请 块 起 点 到 手柄 之 间 的 轨道 。 我 们 
的 peSlider 插 件 封装 了 原生 的 jQuery UI 滑 块 ， 因 此 可 以 传递 任何 原生 的 jQuery UI 滑 块 选项 ， 比 如 
以 键 / 值 对 的 形式 传递 创建 范围 反馈 的 选项 。 举 个 例子 ， 我 们 会 指定 range min 选 项 : 

$('#price, #bedrooms, #baths').peSlider({range: 'min'}); 

可 以 用 这 种 方式 传递 任何 jQuery UI 滑 块 选项 。 请 记 住 ，min、max、 和 value 选 项 由 插件 根据 
input 或 select 标 记 自 动 生成 ， 无 需 把 它们 作为 参数 传递 进来 。 

peSlider 插 件 还 会 测算 出 一 个 合理 的 默认 增 量 ,方法 是 用 滑 块 的 最 大 值 除 以 它 的 宽度 ， 然 后 
自动 将 滑 块 的 step 选 项 设置 成 这 个 增 量 。 可 以 很 容易 地 用 自 定义 增 量 覆盖 这 个 默认 值 ,方法 是 设 
置 一 个 具体 的 step 值 : 

$('#price').peSlider({step 50}); 

在 我 们 的 X 光 范例 里 ， 基 于 select 的 滑 块 会 更 新 滑 块 右 侧 的 一 个 只 读 反 馈 文字 区 。peSlider 
插件 不 会 自动 进行 生成 和 更 新 反馈 div 这 一 过 程 ， 因 为 不 是 所 有 的 场合 都 需要 用 到 这 种 特定 的 设 
计 元 素 。 不 过 , 这 项 功能 可 以 使 用 jQuery 实现 , 做 法 是 调整 滑 块 的 slide 事 件 来 检查 新 值 和 更 新 反 
人 馈 div。 


下 面 的 代码 会 在 各 个 select 滑 块 之 后 搬入 一 个 反馈 div， 并 使 用 滑 块 的 Slide 事件 ， 在 滑 块 的 
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值 发 生变 化 时 更 新 反馈 div。 至 于 反馈 div 里 的 文本 , 我 们 只 需 抓 取 滑 块 手柄 的 aria-valuetext 值 ， 
因为 它 已 经 被 格式 化 成 一 种 人 性 化 的 滑 块 值 版 本 : 


$('select') 
// 插 入 滑 块 的 反馈 div 
.after('<div class="slider-status" aria-hidden="true"></div>') 
// 创 建 滑 块 
.peSlider({ 
// 给 滑 块 的 slide 事 件 绑 定 一 个 回调 济 数 
slide:function(){ 
// 根 据 滑 块 元 素 找到 状态 div 
var statusDiv = $(this).next().next(); 


// 找 到 滑 块 手柄 
var sliderHandle = $(this).find('a:eq(0)'); 


// 用 aria-valuetext 属 性 设置 statusDiv 里 的 文本 
statusDiv.text(sliderHandle.attr('aria-valuetext' )); 


.each(function(){ 
// 根 据 select 元 素 找到 状态 div 
var statusDiv = $(this).next(); 


// 根 据 select 元 素 ， 找 到 滑 块 手柄 
var sliderHandle = $(this).next().find('a:eq(0)'); 


// 用 aria-valuetext 属 性 设置 statusDiv 里 的 文本 
statusDiv.text(sliderHandle.attr('aria-valuetext')); 


}); 
peSlider 插 件 被 设计 成 非常 简单 的 形式 ， 因 为 jQuery UI 滑 块 提供 了 大 量 的 功能 ， 我 们 可 以 轻 
松 地 利用 这 些 功 能 来 扩展 它 。 








注意 要 了 解 jQuery UI 滑 块 里 各 种 可 用 功能 的 更 多 信息 ， 包 括 竖 直 方向 、 额 外 的 回调 事件 ， 以 
及 用 ThemeRoller.com 实 现 视觉 主题 ， 请 阅读 http://jqueryui.com/demos/slider 里 的 文档 。 


让 滑 块 更 进一步 
有 两 种 高 级 功能 可 以 添加 到 滑 块 中 ， 使 它 具 备 更 高 的 可 用 性 和 交互 性 。 
戎 滑 块 手 柄 附近 的 工具 提示 (无论 是 在 滑 块 事件 中 显示 还 是 始终 显示 ) 能 够 提供 对 当前 


选中 值 的 反馈 。 
也 沿 着 滑 块 轴 的 刻度 线 和 标签 能 提供 额外 的 视觉 上 下 文 信息 ， 帮 助 用 户 理解 选项 连续 区 
间 里 的 粒度 级 别 。 


我 们 在 自己 网 站 上 的 一 篇 实验 室 文 章 里 探索 了 如 何 扩展 jQuery UI 滑 块 来 添加 这 两 种 功能 
( http://t.cn/zRIHurf )。 
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本 章 曾 述 了 如 何 用 渐进 增强 技巧 构建 出 滑 块 等 非常 具有 交互 性 的 元 素 ,并 使 它 能 在 所 有 设备 
上 正常 工作 。 我 们 认为 , 用 脚本 从 基础 标记 里 解析 数据 并 生成 增强 的 JavaScript 组 件 是 一 种 非常 强 
大 的 方法 ， 它 不 仅 利 用 了 Web 2.0 的 特性 ， 而 且 仍 然 提 供 了 能 在 所 有 设备 上 正常 工作 的 等 价 语义 
化 HTML。 

我 们 还 演示 了 如 何 封装 现 有 的 、 功 能 完备 的 插件 ， 使 它 提 供 渐 进 增强 的 能 力 和 ARIA 可 访问 
性 支持 。 如 果 你 想得到 某 个 插件 ， 其 中 包含 你 想 要 的 功能 ， 那么 我 们 觉得 这 就 是 个 好 办 法 。 你 可 
以 加 入 必要 的 可 访问 性 考量 ， 而 不 必 重 新 发 明 轮 子 ， 从 头 重 新 编写 一 个 插件 。 
































原生 的 select 元 素 看 起 来 十 分 简单 , 但 其 实 是 健壮 而 复杂 的 组 件 : 它们 包含 了 许多 交互 功能 
比如 用 于 导航 和 选择 选项 的 键盘 映射 、 单 字母 输入 提示 以 及 鼠标 滚轮 支持 〈 仅 举 几 例 )。 

经 常会 有 一 些 设计 要 求 下 拉 菜 单 具 有 自 定义 的 观感 。 理 想 的 情况 下 ,可 以 只 用 CSS 来 为 一 个 
标准 select 元 素 添 加 样式 ， 同 时 保留 Web 用 户 所 期 望 的 那些 原生 功能 。 但 是 ,浏览 器 对 给 这 些 元 
素 添加 样式 所 提供 的 支持 非常 有 限 : 样式 由 各 种 浏览 器 自行 定义 (包括 文本 样式 和 大 小 、 盒 轮廓 
线 和 箭头 样式 、 下 拉 菜 单 选项 格式 ， 以 及 滚动 条 )， 大 多 数 无 法 用 CSS 进 行 配 置 。 

许多 网 站 设计 (包括 我 们 设计 的 一 些 ) 基于 视觉 和 功能 的 原因 需要 包含 自 定 义 的 下 拉 菜 单 。 
常见 的 改进 包括 : 

> 修改 select 元 素 文本 内 容 、 盒 外 形 或 下 拉 箭 头 的 外 观 样 式 来 匹配 网 站 独特 的 视觉 设计 ; 

> 在 各 个 菜单 项 的 边 上 添加 图 标 来 强化 内 容 的 选择 ， 比 如 在 电子 商务 网 站 里 显示 产品 的 颜 

色 ， 或 者 在 国家 位 置 或 货币 选择 页 上 显示 国旗 ; 

> 将 选项 菜单 的 格式 调整 为 层 级 结构 , 或 者 把 option 文 本 的 格式 调整 为 多 行 , 并 带 有 多 种 文 

a 粗 体 与 普通 字体 )。 
论 从 用 户 体验 还 是 企业 品牌 的 角度 看 , 追求 这 些 目标 都 有 着 正当 的 理由 ,而 一 个 自 定 义 的 
0 前 提 是 实现 方式 正确 。 

本 章 会 分 析 如 何 把 一 个 原生 的 HTML select 元 素 转 变 成 带 有 图 标 和 高 级 样式 格式 的 自 定义 

smn 并 详细 介绍 如 何 实现 你 期 望 从 原生 select 中 获得 的 全 部 交互 功能 和 可 访问 性 。 然 
后 ,讨论 如 何 将 这 些 原则 扩展 到 其 他 各 种 自 定义 的 形式 上 (包括 复杂 的 选项 内 容 格 式 化 和 单字 母 
输入 提示 支持 )， 并 展示 如 何 将 一 个 健壮 的 自 定 义 下 拉 菜 单 组 件 集 成 到 你 的 项 目 里 。 












































17.1 X 光 透视 


假设 我 们 正在 构建 一 个 零售 应 用 程序 ,购物 者 可 以 在 结账 过 程 中 选择 他 们 所 购 商 品 的 礼物 包 
装 。 我 们 希望 能 为 用 户 提供 这 样 的 下 拉 菜 单 : 下 拉 菜 单 选项 具有 良好 的 视觉 反馈 ,因此 添加 一 张 
缩 略 图 ， 里 面 展示 了 各 种 样式 的 颜色 和 图 案 ( 见 图 17-1 )。 与 此 同时 ,我们 还 想 定 制 下 拉 莱 单 的 
字体 风格 和 视觉 样式 ， 以 匹配 整个 零售 网 站 的 设计 。 

通过 X 光 透视 ， 可 以 看 出 这 个 自 定义 下 拉 菜 单 有 3 个 元 素 : 一 个 用 于 标识 控件 的 标签 ,一 个 
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显示 当前 选中 项 反馈 信息 的 可 点 击 元 素 , 以 及 一 张 在 它 下 面 展开 的 选项 菜单 , 里面 显示 出 可 用 的 
选项 。 





Gift wrap pattern: Blue snow ko 





Gift wrap pattern: | Blue snow | 
圈 Purpie bubbies 


Yellow swirl 
Blue snow 
Pink sparks 


Green blobs 

















图 17-1 自 定义 下 拉 菜 单 的 目标 设计 ， 每 个 选项 边 上 都 带 有 图 标 

这 个 目标 设计 体现 出 标准 select 元 素 的 所 有 视觉 线索 (按钮 形状 和 轮廓 线 、 渐 变质 感 、 指 示 
箭头 )， 因 此 在 基础 标记 里 很 明显 应 该 从 一 个 原生 的 select 元 素 起 步 。 基 本 体验 只 会 显示 这 个 
select， 再 加 上 内 容 为 Gift wrap pattern: (礼物 包装 图 样 : ) 的 1abel 和 各 个 选项 。 我 们 认为 让 用 户 
看 一 张 图 能 帮助 他 们 做 出 明智 的 决定 ,因此 在 select 后 面 加 上 一 个 链接 ,连接 到 显示 礼物 包装 选 
项 预览 的 网 页 ， 如 图 17-2 所 示 。 


Gift wrap pattern | Blue snow 3 view samples 


| Purple bubbles 

















| Green blobs 











图 17-2 ”基本 体验 里 的 礼物 包装 选择 工具 是 一 个 标准 的 select 控 件 











某 个 浏览 器 通过 能 力 测试 后 ， 用 JavaScript 获 取 这 个 select 元 素 的 “数据 ”( 标签 、 类 、 属 性 
和 选项 文本 )， 用 这 些 信息 动态 构建 一 个 自 定义 下 拉 菜 单 组 件 ， 它 会 取代 原生 的 控件 ， 并 以 一 种 
“代理 ”的 形式 与 原生 select 元 素 在 后 台 通 信 。 

可 点 击 元 素 的 标记 必须 使 用 一 个 原生 能 获得 键盘 焦点 的 元 素 ， 可 以 使 用 一 个 标准 的 销 链 接 ， 
一 个 type 为 button 的 input, 或 是 一 个 button 元 素 。 应 用 增强 信息 时 , 用 JavaScript 重 写 此 元 素 的 主 
要 功能 ( 链接 到 另 一 张 网 页 或 资源 ， 或 者 提交 表单 数据 )， 所 以 选择 的 依据 就 成 了 哪 种 元 素 最 容 
易 修 改 样式 。 可 以 不 使 用 input 按 钮 ， 因 为 它 不 支持 背景 图 像 (我 们 的 设计 里 有 多 处 甚 停 状 态 和 
礼物 包装 图 标 会 用 到 背景 图 像 )。 这 样 就 剩 下 了 button 和 锚 元素， 无论 哪 一 种 都 可 以 有 效 地 用 于 
目标 设计 。 这 个 范例 会 使 用 一 个 锚 元 素 。 
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自 定 义 下 拉 沫 单 由 一 张 带 有 样式 的 链接 列表 组 成 。 最 接近 这 种 结构 的 语义 匹配 是 一 张 无 序 列 
表 (ul )， 里 面 用 一 个 内 含 锚 元 素 的 列表 项 ( 1i ) 来 代表 各 个 菜单 项 。 

目标 设计 还 为 每 个 礼物 包装 选项 都 指定 了 一 个 独一无二 的 图 标 。 许 多 开发 者 会 在 增强 脚本 里 
加 入 各 个 选项 的 背景 图 像 引 用 。 不 建议 使 用 这 种 方式 , 因为 它 限制 我 们 的 脚本 只 能 用 于 这 一 组 数 
据 。 如 果 需 要 添加 额外 的 自 定义 下 拉 菜 单 组 件 , 就 必须 为 每 个 组 件 都 复制 和 定制 一 个 脚本 。 这 样 
使 用 JavaScript 效 率 低下 ,而 且 难 以 维护 , 尤其 是 在 数据 (在 这 个 案例 里 是 礼物 包装 设计 ) 会 发 生 
变化 的 情况 下 。 

与 之 相反 ,我 们 会 用 基础 标记 里 的 属性 来 “编码 ”增强 体验 所 需 的 信息 。 给 每 个 option 都 添 
加 一 个 用 来 指定 图 标 样式 的 class 属 性 ， 然 后 用 增强 脚本 把 这 些 类 转换 成 增强 标记 里 的 对 应 列表 
项 ， 并 使 用 CSS 设 置 各 个 选项 的 背景 图 像 。 这 种 做 法 虽然 会 给 基础 标记 增加 额外 的 属性 ， 但 却 是 
无 害 的 (class 属 性 不 会 影响 到 option 元 素 的 使 用 或 显示 方式 )， 利 用 它 就 能 以 一 种 通用 的 方式 编 
写 脚 本 ， 将 它 用 于 应 用 程序 里 的 多 个 下 拉 菜 单 。 

自 定义 下 拉 菜 单 看 上 去 会 非常 像 标 准 的 select 元 素 , 因此 用 户 可 能 会 期 望 它 能 以 相同 的 方式 
对 鼠标 点 击 和 键盘 命令 作出 反应 。 用 户 应 能 使 用 Tab 键 进入 和 离开 自 定义 下 拉 菜 单 ， 用 鼠标 点 击 
或 者 Tab 键 进入 后 按 下 空格 键 来 打开 菜单 ， 用 方向 键 在 选项 列表 里 上 下 移动 ， 以 及 点 击 鼠 标 或 按 
下 空格 / 回 车 键 来 选择 某 个 选项 。 为 了 在 自 定 义 下 拉 荣 单 里 启用 这 种 行为 ， 需 要 编写 标记 和 脚本 
逻辑 来 改变 锚 元 素 的 原生 行为 ， 使 它们 转 而 遵循 原生 select 的 行为 模式 。 

对 屏幕 阅读 器 来 说 , 构建 的 自 定义 下 拉 菜 单 应 该 是 一 个 自 定 义 的 下 拉 菜 单 组 件 , 而 不 是 一 个 
锁链 接 与 一 张 无 序列 表 。 为 此 ， 我 们 会 添加 ARIA 属 性 ， 标 明 自 定义 下 拉 菜 单 各 个 部 分 所 扮演 的 
角色 、 它 们 之 间 的 关系 ， 以 及 它们 当前 的 状态 和 值 。 

最 后 , 需要 确保 用 户 对 礼物 包装 的 选择 会 随 表 单一 起 提交 。 在 增强 体验 里 , 我们 会 在 网 页 上 
保留 原生 的 select 元 素 , 但 对 用 户 隐藏 。 只 要 自 定义 下 拉 菜 单 组件 的 值 发 生变 化 ,我 们 就 会 把 它 
的 值 代理 发 送 到 原生 的 select 元 素 上 ， 使 这 个 用 于 表单 提交 的 元 素 能 保持 同步 。 


17.2 创建 可 访问 的 自 定 义 下 拉 荣 上 


对 这 个 自 定义 下 拉 菜 单 , 创建 用 于 基本 体验 的 基础 标记 结构 , 并 在 这 个 结构 中 编写 增强 脚本 
所 需 的 属性 ， 从 而 构建 自 定义 组 件 。 然后, 分 步 介 绍 如 何 标记 自 定义 下 拉 菜 单 ， 如 何 指派 向 屏幕 
阅读 需 用 户 提 供 反馈 所 需 的 ARIA 属 性 ， 以 及 如 何 给 它 添加 样式 来 匹配 我 们 的 目标 设计 。 最 后 ， 
分 析 增 强 脚 本 如 何 生 成 自 定义 下 拉 菜 单 ,将 它 插入 页 面 , 给 它 应 用 行为 (包括 键盘 支持 和 输入 提 
示 功 能 )， 以 及 创建 隐藏 select 元 素 的 代理 ， 让 表单 数据 在 基本 体验 和 增强 体验 里 能 以 相同 的 方 


17.2.1 基础 标记 和 样式 


基础 标记 由 一 个 标准 select 元 素 和 一 个 label 配 对 组 成 。1abel 元 素 的 for 属 性 匹配 select 的 
id， 它 为 屏幕 阅读 器 提供 元 素 的 关联 信息 ， 并 让 用 户 可 以 通过 点 击 label 使 select 获 得 焦点 : 
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<label for="giftwrap">Gift wrap pattern:</label> 
<select name="giftwrap" id="giftwrap"> 


<option 
<option 
<option 
<option 
<option 
</select> 


value="pattern-bubbles">Purple bubbles</option> 
value="pattern-swirl">Yellow swirl</option> 
value="pattern-snow" selected="selected">Blue snow</option> 
value="pattern-sparks">Pink sparks</option> 
value="pattern-blobs">Green blobs</option> 


<a href="giftwrap-patterns.html" id="giftwrap-patterns">view samples</a> 


接 下 来 ， 


给 select 里 的 每 个 option 值 都 编码 一 个 唯一 的 class ， 我 们 会 在 增强 体验 里 借助 它 


们 用 JavaScript 构 建 自 定义 下 拉 菜 单 选项 ， 并 应 用 图 标 。 


<select name="giftwrap" id="giftwrap"> 


<option 
<option 
<option 
<option 
<option 
</select> 


class="purple-bubbles" value="pattern-bubbles">Purple bubbles</option> 
class="yellow-swir]l" value="pattern-swir]">Yellow swirl</option> 
class="blue-snow" value="pattern-snow" selected="selected">Blue snow</option> 
class="pink-sparks" value="pattern-sparks">Pink sparks</option> 
class="green-blobs" value="pattern-blobs">Green blobs</option> 


a 











对 基本 体验 而 言 ， 给 body 和 select 元 素 都 指派 一 个 font-family 属 性 (这 里 有 必要 直接 针对 
select 元 素 ， 因 为 一 些 浏 览 器 不 允许 表单 元 素 继承 字体 样式 ): 
body, select { font-family: "Segoe UI", Arial, sans-serif; } 


应 用 少量 CSS 后 ， 基 本 的 select 如 图 17-3 所 示 。 








Gift wrap pattern' Blue snow 1 兆 | view samples 


Purple bubbles 
Yellow swirl 







| Pink sparks 
| Green blobs 











图 17-3 ”应 用 安全 样式 后 的 原生 HTML select， 以 及 一 个 指向 礼物 包装 图 像 的 链接 











这 个 基本 体验 具有 完整 的 功能 ,指向 样本 图 像 页 的 链接 则 添加 了 出 现在 增强 体验 里 的 那 点 缺 
少 的 内 容 。 现 在 ,我 们 已 经 准备 就 绪 ， 可 以 开始 组 装 自 定义 下 拉 菜 单 的 标记 和 样式 了 。 


17.2.2 ”增强 标记 和 样式 


讨论 组 件 标 记 之 前 , 首先 需要 指导 屏幕 阅读 器 识别 增强 标记 里 的 应 用 程序 控件 , 这 样 就 能 利 
用 自 定 义 的 键盘 行为 。 为 此 ， 给 pody 元 素 添加 一 个 值 为 application 的 ARIA role 属 性 : 


<body role="application"> 


接 下 来 ,JavaScript 会 根据 基础 select 元 素 里 的 值 生 成 自 定义 下 拉 荣 单 的 两 个 部 件 ( 菜单 按 钮 


和 选项 列表 )。 





脚本 会 把 菜单 按钮 插入 到 页 面 标记 里 的 基础 Select 元 素 ( 它 在 整个 自 定义 下 拉 菜 
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单 就 位 后 会 被 隐藏 ) 之 后 ,并 把 选项 列表 放 在 网 页 末尾 ， 以 确保 它 的 菜单 能 可 靠 地 排列 在 其 他 绝 
对 定位 的 网 页 元 素 之 上 。 

这 个 按钮 是 一 个 锚 链 接 ， 由 选中 选项 的 文本 生成 ， 而 选项 菜单 是 一 张 无 序 链接 列表 ,由 所 有 
选项 的 文本 生成 。 两 者 都 会 被 指派 一 个 独一无二 的 id， 所 依据 的 是 select 元 素 的 id ( giftwrap ): 


<a href="#" id="giftwrap-button">Blue snow</a> 
<ul id="giftwrap-menu"> 
<]1i><a href="#">Purple bubbles</a></1i> 
<]i><a href="#">Yellow swirl</a></1i> 
<]i><a href="#">Blue snow</a></1i> 
<li>x<a href="#">Pink sparks</a></1i> 
<]i><a href="#">Green blobs</a></1i> 
</ul> 























注意 虽然 自 定义 菜单 的 行为 会 由 JavaScript 处 理 ， 但 只 要 有 可 能 ， 利 用 内 建 于 HTML 元 素 的 原 
生 行为 都 物 有 所 值 。 因 此 ， 我 们 在 各 个 列表 项 里 使 用 的 是 锚 链 接 ， 因 为 锚 点 在 各 种 浏览 
器 里 都 是 原生 可 获得 焦点 的 。 


给 这 两 个 部 件 指 派 一 些 类 , 稍 后 用 CSS 来 给 它们 添加 样式 : custom-select 类 会 让 链接 的 样式 
看 起 来 就 像 一 个 可 点 击 的 按钮 ， 而 应 用 到 ul 上 的 custom-select-menu 类 会 让 它 看 起 来 像 个 下 拉 菜 
单 , 菜 单 在 网 页 载 和 时 应 该 是 隐藏 的 , 因此 这 张 列表 还 带 有 一 个 类 ( custom-select-menu-hidden ): 


<a href="#" class="custom-select" id="giftwrap-button">Blue snow</a> 
<ul class="custom-select-menu custom-select-menu-hidden" id="giftwrap-menu"> 
<li><a href="#">Purple bubbles</a></1i> 
<li><a href="#">Yellow swirl</a></1i> 
<li><a href="#">Blue snow</a></1i> 
<li><a href="#">Pink sparks</a></1i> 
<li><a href="#">Green blobs</a></1i> 
</ul> 


当 脚 本 生成 这 些 元 素 的 标记 时 ,， 它 会 遍历 原来 的 select 元 素 并 记录 选中 的 选项 ( 如 果 没 有 选 
项 被 标记 为 已 选中 ， 就 记录 第 一 个 选项 )， 然 后 获取 分 配给 option 元 素 的 那些 礼物 包装 类 ， 并 将 
它们 分 配给 增强 标记 ， 从 而 给 菜单 链接 和 列表 选项 应 用 正确 的 图 标 : 


<a href="#" class="custom-select blue-snow" id="giftwrap-button">Blue snow 
</a> 
<ul class="custom-select-menu custom-select-menu-hidden" id="giftwrap-menu"> 
<l1i class="purple-bubbles"><a href="#">Purple bubbles</a></1i> 
<li class="yellow-swirl"><a href="#">Yellow swirl</a></1i> 
<li class="blue-snow selected"><a href="#">Blue snow</a></1i> 
<li class="pink-sparks"><a href="#">Pink sparks</a></1i> 
<li class="green-blobs"><a href="#">Green blobs</a></1i> 
</ul> 


为 了 让 销 元 素 看 起 来 像 个 菜单 按钮 ， 脚 本 会 生成 两 个 span 标 签 ， 并 将 它们 插入 到 销 链 接 里 : 
第 一 个 是 custom-select-status ， 它 给 选中 项 添加 按钮 文字 样式 ; 第 二 个 是 custom-select- 
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button-icon， 它 用 于 后 盖 的 箭头 图 标 : 


<a href="#" class="custom-select blue-snow" id="giftwrap-button"> 
<span class="custom-select-status">Blue snow</span> 
<span class="custom-select-button-icon"></span> 

</a> 


我 们 应 该 通知 屏幕 阅读 右 这 个 链接 是 一 个 下 拉 菜 单 按钮 , 而 不 是 一 个 简单 的 超 链接 ,因此 添 
加 一 些 ARIA 属 性 : role="button" 用 于 通知 屏幕 阅读 器 此 链接 扮演 的 是 按钮 控件 的 角色 ， 
haspopup=”true” 用 于 关联 按钮 和 弹出 内 容 ( 在 这 个 案例 里 是 一 张 选项 菜单 )，aria-owns= 
"giftwrap-menu" 的 作用 是 将 它 明确 关联 到 无 序列 表 的 ID 上 : 


<a href="#" class="custom-select blue-snow" id="giftwrap-button" 
role="button" aria-haspopup="true" aria-owns="giftwrap-menu"> 
<Span class="custom-select-status">Blue snow</span> 
<span class="custom-select-button-icon"></span> 
</a> 


给 按钮 添加 一 个 内 含 “ select”( 即 “ 下 拉 菜 单 ”"， 请 注意 此 单词 前 的 空格 ) 文字 的 span， 我 们 
会 让 它 对 视力 正常 的 用 户 隐藏 。 这 段 文 字 会 作为 额外 的 角色 描述 ， 用 于 那些 不 完全 支持 ARIA 属 1 
的 屏幕 阅读 器 。( 举 个 例子 ， 写 作 本 书 时 ， 苹 果 公司 的 VoiceOver 屏 幕 阅读 器 支持 putton 角 色 ， 但 不 
会 通知 用 户 某 个 元 素 带 有 haspopup="true" 属 性 ， 因 此 扮演 的 是 ee 色 。 这 个 span 到 位 后 ， 
VoiceOver 就 会 在 菜单 按钮 获得 焦点 时 朗读 出 “Blue snow select button”， 有 即 “ 蓝 雪 下 拉 菜 单 按 钮 ” ) 


<a href="#" class="custom-select blue-snow" id="giftwrap-button" 
role="button" aria-haspopup="true" aria-owns="giftwrap-menu"> 
<Span class="custom-select-status">Blue snow</span> 
<Span class="custom-select-button-icon"></span> 
<span class="custom-select-roletext"> select</span> 
</a> 


同样 ， 给 选项 列表 添加 一 些 ARIA 属 性 ， 让 屏幕 阅读 带 理 解 它 是 自 定义 下 拉 菜 单 的 一 部 分 。 
给 岂 指 派 一 个 值 为 listbox 的 role 来 标明 它 是 下 拉 荣 单项 的 容器 ， 然 后 指派 aria-hidden="true" 来 
告诉 屏幕 阅读 器 选项 列表 当前 是 隐藏 的 。 用 一 个 指向 菜单 按钮 ID ( giftwrap-button ) 的 
aria-labelledby 属 性 来 明确 关联 选项 列表 和 菜单 按钮 : 


<ul class="custom-select-menu custom-select-menu-hidden" id="giftwrap-menu" 
role="listbox" aria-hidden="true" aria-labelledby="giftwrap-button"> 


























出 









































cu 
我 们 会 给 每 个 选项 链接 都 添加 一 个 role="option" 属 性 来 标明 它 是 可 选择 的 , aria-selected 属 性 
则 标明 了 选项 的 状态 : 


<ul class="custom-select-menu custom-select-menu-hidden" id="giftwrap-menu" 
role="listbox" aria-hidden="true" aria-labelledby="giftwrap-button"> 

<li class="purple-bubbles"> 

<a href="#" role="option" aria-selected="false">Purple bubbles</a> 

</1i> 














</ul> 
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注意 这 个 脚本 会 在 用 户 与 菜单 交互 时 动态 更 新 所 有 的 aria-hidden 和 aria-selected 属 性 , 还 会 
在 后 台 更 新 基础 Select， 让 它 的 选中 项 始终 匹配 自 定义 菜单 。 


我 们 还 会 给 每 个 选项 链接 都 添加 tabindex 属 性 。 在 默认 情况 下 ,页 面 上 的 所 有 链接 都 能 通过 
Tab 键 导航 获得 焦点 。 但 在 这 个 案例 里 ， 我 们 想 让 菜单 被 视 为 自 定义 下 拉 菜单 组 件 的 一 部 分 ， 通 
过 点 击 菜单 按钮 ( 而 不 是 网 页 上 的 一 列 链接 ) 进行 访问 ， 因 此 把 各 个 选项 链接 移出 制 表 键 顺序 ， 
方法 是 指派 一 个 值 为 -1 的 tabindex。 

<ul class="custom-select-menu custom-select-menu-hidden" id="giftwrap-menu" 

role="listbox" aria-hidden="true" aria-labelledby="giftwrap-button"> 

<li class="purple-bubbles"> 
<a href="#" tabindex="-1" role="option" aria-selected="false">Purple 


bubbles</a> 
</1i> 

















</ul> 

增强 标记 结构 到 位 后 ， 给 它 添 加 样式 来 匹配 目标 设计 。 

菜单 按钮 看 起 来 像 一 个 占据 一 定 面积 的 可 点 击 物体 , 因此 我 们 会 让 它 向 左 浮动 ( 这 使 它 具 备 
块 级 属性 )， 给 它 指定 一 个 宽度 值 ， 然 后 为 支持 圆 角 和 文字 阴影 的 浏览 需 添 加 porder-radius 和 
text-shadow 属 性 。 再 用 边框 和 渐变 背景 图 像 进一步 修饰 它 : 


.Custom-select { 
float:1left; 
text-decoration:none; 
text-align:1left; 
cursor:pointer; 
position:relative; 
background:#fff url(../images/button-silver.gif) left center repeat-x; 
border:1px solid #b3b3b3; 
font-size:1.3em; 
font-weight:bold; 
overflow:visible; 
-moz-border-radius:7px; 
-webkit-border-radius:7px; 
border-radius:7px; 
width:180px; 
text-shadow:1px 1px 0 #fff; 

} 


菜单 按钮 内 部 的 两 个 span ( 分 别 用 于 当前 选中 项 文本 和 带 箭头 图 标的 菜单 后 盖 ) 会 设置 成 向 
左 浮动 。 给 后 盖 指 定 一 张 背 景 图像 并 加 上 圆 角 : 
.CUStom-select-status { 
float:1left; 
line-height:2; 
Color:#444; 
padding: .2em 8px; 
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.Custom-select-button-icon { 
float:right; 
background:#fff url(../images/button-green.gif) left center repeat-x; 
height:2.5em; 
width:2em; 
-moz-border-radius-topright:7px; 
-webkit-border-top-right-radius:7px; 
border-top-right-radius:7px; 
-moz-border-radius-bottomright:7px; 
-webkit-border-bottom-right-radius:7px; 
border-bottom-right-radius:7px; 


} 
隐藏 基础 标记 里 的 View Samples ( 查看 示例 ) 链接 ， 因 为 不 再 需要 把 它 放 在 自 定义 下 拉 菜 单 
边 上 了 ， 如 图 17-4 所 示 。 


#giftwrap-patterns { display: none; } 


Gift wrap pattern: Blue snow = 


图 17-4 ”应 用 样式 后 的 自 定 义 下 拉 菜 单 按钮 


悬 停 和 聚焦 状态 (通过 :hover 和 :focus 伪 类 指定 ) 会 在 用 户 把 鼠标 放置 于 按钮 上 方 或 用 Tab 
键 让 它 获得 焦点 时 提供 视觉 反馈 。 创 建 一 个 custom-select-open 类 ， 通 过 JavaScript 给 按钮 应 用 下 
列 样式 ， 使 它 在 菜单 展开 时 看 上 去 像 是 被 按 下 了 ， 如 图 17-5 所 示 。 


.Custom-select:hover, 

.Custom-select:focus, 

.CUstom-select-open { 
background-position:right center; 
border-color:#999; 

} 

.Custom-select:hover .custom-select-button-icon, 

.Custom-select:focus .custom-select-button-icon, 

.CUstom-select-open .custom-select-button-icon { 
background-position:-500px center; 


} 






























































图 17-5” 悬 停 /获得 焦点 状态 对 应 的 自 定义 下 拉 菜 单 按钮 


用 绝对 定位 的 方式 ， 让 包含 可 听见 角色 文字 (“select”"， 即 下 拉 菜 单 ) 的 span 对 视力 正常 的 
用 户 隐藏 起 来 ， 这 样 屏幕 阅读 器 就 仍然 能 发 现 它 并 朗读 出 来 : 
.Custom-select-roletext { 
position: absolute; 


left: -99999px; 
} 
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对 于 选项 列表 ,我们 会 添加 一 个 边框 、 一 张 背景 图 像 和 一 个 很 大 的 z-index 值 ， 这 样 下 拉 菜 
单 就 会 显示 在 网 页 其 他 元 素 的 上 方 。 我 们 还 会 应 用 overflow 属 性 来 有 条 件 地 显示 垂直 深 动 条 ， 增 
强 脚本 会 用 这 个 属性 通过 程序 限制 菜单 的 高 度 : 


.CUstom-select-menu { 
border: 1px solid #b3b3b3; 
background: #e9e9ge9; 
z-index: 999999; 
position: absolute; 
margin: 0; 
padding: 0; 
font-size: 1.3em; 
-moz-border-radius: 7px; 
-webkit-border-radius: 7px; 
border-radius: 7px; 
width: 180px; 
cursor: pointer; 
text-shadow: 1px 1px 0 #fafafa; 
overflow: auto; 
overflow-x: hidden; 


} 
我 们 会 移 除 列表 项 的 内 边 距 和 外 边 距 ， 转 而 把 这 些 属 性 应 用 到 选项 链接 上 : 


.Custom-select-menu 1i { 
padding: 0; 
margin: 0; 
list-style: none; 
clear: both; 


























| 


每 个 列表 项 的 链接 都 会 添加 样式 , 使 它 看 起 来 像 个 菜单 选项 , 而 非 标准 的 链接 ,因此 给 它 设 
置 块 级 属性 、 内 边 距 和 灰色 字体 颜色 ， 并 移 除 链接 默认 的 文本 下 划 线 : 


.Custom-select-menu li a { 
text-decoration:none; 
Color:#555; 
display:block; 
cursor:pointer; 
padding: .5em 5px; 
text-shadow:1px 1px 0 #f9f9f9; 
































} 

我 们 想 要 让 按钮 显示 出 恰当 的 交互 反馈 。 首 先 ， 确保 不 去 覆盖 浏览 絮 原 生 的 获得 焦点 状态 ， 
也 就 是 在 用 户 通 过 键盘 导航 到 它 上 面 时 , 默认 应 用 到 获得 焦点 状态 上 的 点 状 或 发 光 轮 廊 线 。 另 外 ， 
脚本 会 在 用 户 悬 停 或 菜 个 选项 获得 焦点 时 动态 指派 一 个 hover-focus 类 ， 从 而 应 用 一 张 稍 有 不 同 
的 背景 图 像 : 


.Custom-select-menu 1i.hover-focus { 
background:#e6e6e6 url(../images/button-silver.gif) right center repeat-x; 
Color:#444; 

} 
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用 户 选择 某 个 选项 后 ， 脚 本 会 指派 selected 类 来 提供 视觉 反馈 


.Custom-select-menu li.selected { 
background:#66b81e url(../images/menu-green.gif) left center repeat-x; 
Color:#fff; 
} 
.Custom-select-menu li.selected a { 
color:#fff; 
text-shadow:1px 1px 0 #2d7406; 
} 


给 菜单 按钮 和 各 个 选项 链接 添加 图 标 来 标明 礼物 包装 的 类 型 。 给 按钮 文本 的 span 
( custom-select-status ) 和 各 个 选项 链接 指派 一 张 单独 的 组 合 背 景 图 像 , 设置 内 边 距 让 这 些 容器 
里 的 文字 不 会 遮盖 图 像 ， 并 调整 各 个 类 里 背景 图 像 的 位 置 以 显示 出 对 应 的 图 标 : 


#giftwrap-button .custom-select-status, 
#giftwrap-menu li a { 
background-image:url(../images/select-icons.gif); 
background-repeat:no-repeat; 
padding-left:40px; 























.purple-bubbles .custom-select-status, 
li.purple-bubbles a { 
background-position:5px 3px; 


.yellow-swir] .custom-select-status, 
li.yellow-swirl a { 
background-position: 5px -47px; 


.blue-snow .custom-select-status, 
li.blue-snow a { 
background-position:5px -97px; 


.pink-sparks .custom-select-status, 
li.pink-sparks a { 
background-position:5px -147px; 


.green-blobs .custom-select-status, 
li.green-blobs a { 
background-position:5px -197px; 





应 用 样式 之 后 ， 自 定义 下 拉 菜 单 现 在 如 图 17-6 所 示 。 

我 们 差不多 已 经 完成 了 增强 标记 和 样式 。 在 结束 之 前 ， 需 要 处 理 基 础 标记 里 的 原生 select 
元 素 及 其 label。 

自 定义 下 拉 菜 单 会 完全 取代 基础 select 的 功能 ,因此 没有 理由 让 原来 的 select 继 续 在 页 面 上 
保持 可 见 。 用 JavaScript 给 We hidden 类 ， 同 时 也 添加 一 个 aria-hidden="true" 
属性 ， 让 select 对 启用 ARIA 的 屏幕 阅读 器 隐 


<select name="giftwrap" id="giftwrap" class="select-hidden" aria-hidden= 
"true"> 




















</select> 
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图 17-6 各 项 都 带 有 图 标的 自 定义 下 拉 菜 单 
为 了 隐藏 select， 应 用 display: none 属 性 : 


.Select-hidden { 
display: none; 





最 后 ， 关 联 基础 标签 元 素 (“Gift wrap pattern:”， 意 为 礼物 包装 图 案 ) 和 自 定义 下 拉 菜 单 的 
按钮 , 方法 是 更 新 它 的 for 属 性 ， 指 向 按钮 的 id ( 稍 后 用 JavaScript 给 标签 显 式 设置 一 个 click 事 件 
来 强化 这 些 元 素 之 间 的 关系 ): 

<label for="giftwrap-button">Gift wrap pattern:</label> 


对 增强 标记 和 样式 的 规划 至 此 告 一 段落 。 下 面 创建 脚本 来 生成 这 些 标记 ， 并 让 它 能 够 工作 。 








17.2.3” 自 定义 下 拉 菜 单 增强 脚本 


某 个 浏览 器 通过 能 力 测试 后 ,我 们 会 用 JavaScript 把 基础 标记 里 的 select 元 素 转变 成 自 定义 的 
下 拉 菜 单 组 件 ， 指 派 用 于 开启 和 关闭 菜单 的 事件 ， 添 加 键盘 支持 ， 并 应 用 ARIA 属 性 使 一 切 都 具 
备 可 访问 性 。 我 们 还 会 在 原生 select 和 它 对 应 的 自 定义 组 件 之 间 创 建 一 个 代理 连接 ,这 样 表单 无 
论 在 哪 种 体验 里 都 能 一 致 地 进行 提交 。 

1. 生成 增强 标记 

脚本 的 第 一 步 是 生成 增强 的 自 定 义 下 拉 菜 单 标记 , 并 把 它 插入 网 页 。 首 先 , 创建 若干 变量 来 
存放 对 原生 select 元 素 及 其 选项 属性 的 引用 (本 章 后 面 会 用 它们 来 构建 菜单 按钮 和 自 定 义 选 项 列 
表 ， 以 及 设置 当前 的 选中 项 ); 


// 对 原生 Select 元 素 的 引用 
var selectElement = $('#giftwrap' ); 





























// 获 取 select 的 ID 
var selectElementID = selectElement.attr('id'); 


// 获 取 初 始 选 中 序号 
var initialSelectedIndex = selectElement[0].selectedIndex; 
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// 获 取 选 中 项 的 文本 值 
var selectedOptionText = selectElement.find('option') 
.eq(initialSelectedIndex).text(); 


// 获 取 选 中 项 的 类 属性 值 
Var selectedOptionClass = selectElement.find('option') 
.eq(initialSelectedIndex).attr('class'); 


// 得 到 由 所 有 select 选 项 的 类 所 构成 的 数组 ， 用 于 快速 移 除 
var allOptionClasses = selectElement.find('option') 
// 将 选项 的 类 转换 成 数组 
.map(function(){ return $(this).attr('class'); }) 
// 把 数组 合并 成 类 的 字符 事 ， 类 和 类 之 间 由 一 个 空格 分 陪 
.get().join(" '); 


接 下 来 , 根据 原生 select 的 ID 创 建 自 定 义 下 拉 菜 单 按钮 和 菜单 的 ID, 然后 构建 菜单 按钮 的 标 
记 ， 并 将 它 插 入 到 网 页 里 的 原生 select 之 后 : 

// 创 建 按钮 和 菜单 的 ID 

Var buttonID = selectElementID + '-button'; 

Var menuID = selectElementID + '-menu'; 








// 创 建 空白 的 菜单 按 锂 

var button = $('<a class="custom-select" id="'+ buttonID 
w+'" role="button" href="#" aria-haspopup="true" aria-owns="" 
w+ menuId +'"></a>'); 


// 创 建 按钮 文本 、 图 标 和 角色 文本 的 span， 并 将 它 放 到 按钮 上 
Var SelectmenuStatus = $('<span class="custom-select-status">"' 
w+ SelectedOptionText +'</span>') 

.appendTo(button); 





var selectmenuIcon = $('<span class="custom-select-button-icon"></span>') 
.appendTo(button); 


var roleText = $('<span class="custom-select-roletext"> select</span>') 
.appendTo(button); 


// 如 果 指 定 了 select 的 tabindex 属 性 ， 就 转移 过 来 
if(selectElement.is('[tabindex]')){ 

button.attr('tabindex', selectElement.attr('tabindex')); 
} 


// 添 加 前 面 定义 的 选中 项 的 类 
button.addClass(selectedOptionClass); 


// 在 select 之 后 插入 按钮 
button.insertAfter(selectElement); 


最 后 ,关联 自 定义 下 拉 菜 单 的 按钮 和 基础 标记 里 的 label 元 素 , 并 给 这 个 标签 应 用 一 个 click 
事件 ， 这 样 用 户 点 击 时 它 就 会 把 焦点 转 到 按钮 上 : 


// 关 联 select 的 标签 到 新 按钮 上 
$('label[for='+selectElementID+']') 
.attr('for', buttonID) 





272 第 17 章 下拉 菜单 





.bind('click', function(){ 
button.focus(); 
return false; 


})); 

现在 我 们 就 准备 好 处 理 菜 单 了 。 构 建 选项 列表 的 方法 是 遍历 原生 select 里 的 所 有 option 元 
素 ， 记 录 各 个 option 的 序号 ( 它 在 列表 顺序 里 的 位 置 ) 和 class 属 性 。 然 后 把 完整 的 选项 列表 加 
到 body 上 : 

// 创 建 菜单 Ul 


var menu = $('<ul class="custom-select-menu" id 
aria-labelledby="" + buttonID+'"></ul>'); 





























LE in 


+ menuID+'" role="listbox" aria-hidden="true" 


// 找 到 selectElement 里 的 所 有 选项 元 素 
selectElement.find('option') 
// 遍 历 各 个 选项 元 素 ， 追 踪 它 们 的 序号 
.each(function(index){ 
// 用 选项 的 文本 和 class 属 性 创建 1i 
var 1i = $('<li class="'+ $(this).attr('class') +'"> <a href="#" tabindex="-1" role="option" 
aria-selected="false">' $(this).text() +'¢/a></1i>'); 
// 如 果 选 项 的 序号 匹配 select 元 素 的 选中 序号 
if(index == initialSelectedIndex){ 
// 添 加 选中 的 类 和 ARIA 
1i.addClass( "selected ' ) .attr( "aria-selected' ,true); 


// 给 菜单 追加 1i 
li.appendTo(menu); 
}); 


// 追 加 菜单 到 页 尾 ， 目 前 还 不 要 隐藏 它 
menu.appendTo( "body ); 
为 保险 起 见 ， 检 查 菜单 的 高 度 并 将 它 限 制 为 300 像 素 。 我 们 在 CSS 里 设置 了 overflow 属 性 
这 样 菜单 如 果 超 出 了 最 大 高 度 就 会 显示 牌 直 深 动 条 : 
// 限 制 菜单 的 高 度 
if(menu.outerHeight() > 300){ 
menu.height(300); 




















检查 完 菜 单 的 高 度 之 后 , 用 custom-select-menu-hidden 类 来 隐藏 它 ,。 用 户 与 菜单 按钮 交互 时 ， 
我 们 会 切换 按钮 上 的 这 个 类 来 隐藏 或 显示 它 : 
// 隐 藏 菜单 


menu.addClass('custom-select-menu-hidden' ); 

最 后 ， 给 body 元 素 添加 名 为 application 的 ARIA role， 告 知 屏幕 阅读 器 这 张 网 页 现在 包含 了 
交互 性 组 件 : 

// 给 body 添 加 application 角 色 

$("'body').attr('role','application' ); 

2. 应 用 自 定义 下 拉 菜 单行 为 

我 们 会 创建 自 定义 的 jQuery 事件 来 定义 所 有 的 逻辑 和 行为 ， 它 们 用 于 开启 和 关闭 选项 列表 ， 
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更 新 某 个 选项 被 选中 时 的 菜单 按钮 反馈 ， 以 及 更 新 原生 select 的 值 来 使 它 保持 同步 。 这 里 的 每 一 
条 都 会 在 脚本 里 定义 一 次 ， 然 后 根据 用 户 与 鼠标 或 键盘 的 交互 触发 。 

自 定义 的 show 事 件 会 移 除 菜单 的 custom-select-menu-hidden 类 ,设置 它 的 aria-hidden 属 性 为 
false， 并 将 它 动 态 定位 到 按钮 的 正 下 方 。 它 还 会 把 焦点 放 到 菜单 的 当前 选中 项 上 ， 并 给 按钮 添 


加 一 个 custom-select-open 类 : 

















// 自 定义 的 show 事 件 
menu.bind('show' , function(){ 
$(this) 
// 移 除 隐藏 类 
.removeClass('custom-select-menu-hidden') 


// 移 除 ARIA 隐 藏 属性 
.attr('aria-hidden', false) 


// 把 菜单 放 在 按钮 下 方 

.css({ 
top: button.offset().top + button.height()， 
left: button.offset().left 

}) 

// 把 焦点 转移 到 选中 项 上 

.find('.selected a')[0].focus(); 


// 给 按钮 添加 开启 类 
button.addClass('custom-select-open'); 


D); 

hide 事 件 与 show 事 件 里 的 操作 刚好 相反 ， 它 会 移 除 按钮 上 的 custom-select-open 类 ， 并 给 菜 
单 加 回 原 来 的 custom-select-menu-hidden 类 和 aria-hidden="true" 属 性 : 

// 自 定义 的 hide 事 件 

menu.bind('hide', function(){ 


// 移 除 按钮 上 的 开启 类 
button.removeClass('custom-select-open'); 








$(this) 
// 移 除 隐藏 类 
.addClass('custom-select-menu-hidden') 
// 移 除 ARIA 隐 藏 属性 
.attr('aria-hidden' , true); 


}); 
toggle 事 件 会 有 条 件 地 显示 和 隐藏 菜单 。 如 果菜 单 是 隐藏 的 ， 那么 触发 show 事 件 ; 如 果菜 单 
经 是 可 见 的 ， 那么 触发 hide 事 件 : 


// 给 按钮 应 用 mousedown 事 件 
menu.bind('toggle', function(){ 
// 如 果菜 单 是 隐藏 的 ， 首 先 设置 它 的 位 置 
if(menu.is(':hidden')){ 
// 显 示 菜 单 
menu.trigger(' show' ); 
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elsef 
// 隐 藏 菜单 
menu.trigger( 'hide' ); 
} 
}); 





select 事 件 和 荣 单 里 的 锚 元 素 进行 绑 定 , 它 会 设置 当前 的 选中 项 , 更 新 菜单 按钮 的 文本 和 图 





标 ， 并 把 选中 项 代理 传 回 原生 的 select， 从 而 使 表单 能 正确 提交 数据 : 


// 此 事件 根据 当前 的 选择 更 新 下 拉 菜 单 ( 并 代理 传 回 select) 
menu.find('a').bind('select' ,function(){ 
// 取 消 选择 之 前 的 菜单 选项 
menu 
.find('l1i.selected') 
.removeClass('selected') 
.attr('aria-selected', false); 


// 获 取 新 选中 li 的 类 属性 
var newListItemClass = $(this).parent().attr('class'); 





// 更 新 按钮 图 标的 类 以 匹配 这 个 1i 
button.removeClass(allOptionClasses).addClass( newListItemClass ); 


// 更 新 按钮 的 文本 为 这 个 锚 元 素 的 内 容 
selectmenuStatus.html( $(this).html() ); 


// 更 新 这 个 列表 项 的 选中 属性 
$(this) 
.parent() 
.addClass('selected') 
.attr('aria-selected', true); 


// 触 发 自 定义 的 hide 事 件 来 隐藏 菜单 
menu.trigger( 'hide'); 

// 用 新 的 选择 来 更 新 原生 的 select 
selectElement[0].selectedIndex = menu.find('a').index(this); 


}); 


接 下 来 ,创建 逻辑 代码 ,根据 用 户 的 交互 情况 触发 自 定义 事件 。 在 mousedown 时 触发 toggle 


il 





有 件 来 显示 和 隐藏 菜单 ， 并 return false 以 防止 按钮 获取 焦点 : 


// 给 按钮 应 用 点 击 事件 
button.mousedown(function(){ 
menu.trigger('toggle' ); 

return false; 


}); 





注意 我 们 使 用 的 是 mousedown 而 不 是 click, 这 样 用 户 就 能 按 下 鼠标 键 ， 拖 动 到 菜单 上 ， 然 后 


放 鼠 标 键 进行 选择 。 





我 们 在 荣 单 按钮 上 禁用 click 事 件 〈 方 法 是 让 它 返 回 false )， 因 为 不 想 让 浏览 器 遵循 锚 元 素 


的 原生 click 行 为 : 
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// 禁 用 按钮 的 Click 事件 (用 mousedownVup 代 替 ) 
button.click(function(){ 
return false; 


}); 
在 用 户 点 击 页 面 上 的 其 他 位 置 时 隐藏 菜单 : 


// 给 document 绪 定 click 事 件 来 隐藏 菜单 
$(document).click(function(){ 
menu.trigger( hide' ); 


]); 
指定 完 菜单 按钮 的 行为 之 后 , 接着 处 理 菜单 。 首先 , 给 每 个 菜单 选项 链接 都 绑 定 一 个 mouseup 
事件 ， 它 会 触发 我 们 的 select 事 件 ， 并 return false 来 防止 锚 元 素 获得 焦点 : 


// 给 菜单 应 用 mouseup 事 件 来 选择 选项 

// 这 个 事件 允许 用 户 进行 拖 放 操作 
menu.find("a' ).mouseup(function(event){ 
// 在 这 个 锚 元 素 上 和 触发 Select 事件 
$(this).trigger('select'); 

// 防 止 后 续 原生 事件 的 发 生 

return false; 


由 六 
为 了 提供 视觉 反馈 ， 给 菜单 选项 链接 绑 定 mouseover 和 focus 事 件 ， 从 而 给 它们 的 上 级 列表 项 
添加 hover-focus 类 。 我 们 还 会 绑 定 一 些 事件 ， 在 用 户 离开 选项 时 移 除 这 个 类 。 


//hover 和 focus 事 件 
menu.find('a') 
.bind('mouseover focus',function(){ 
// 移 除 之 前 hover-focus 过 的 选项 上 的 类 
menu.find(' .hover-focus').removeClass('hover-focus'); 














// 给 这 个 选项 添加 类 
$(this).parent().addClass( "hover-focus ' ); 
]) 


.bind('mouseout blur' ,function(){ 
// 从 这 个 选项 上 移 除 类 
$(this).parent().removeClass('hover-focus'); 


}); 
接 下 来 ， 会 应 用 键盘 事件 来 匹配 原生 select 元 素 的 行为 ， 包 括 : 
> 用 空格 键 或 回 车 键 打 开 沫 单 ; 
> 用 上 下 左右 方向 键 在 菜单 选项 里 导航 ; 
上 用 空格 键 或 回 车 键 在 菜单 里 进行 选择 。 
我 们 会 给 菜单 按钮 绑 定 一 个 keydown 事 件 来 做 不 少 事情 。 当 它 被 触发 时 ， 这 个 事件 会 保存 对 
选中 项 的 引用 ， 然 后 根据 按键 的 keycode 用 一 条 switch 语 句 来 应 用 逻辑 代码 。 
按 下 空格 键 或 回 车 键 会 触发 toggle 事 件 来 显示 或 隐藏 菜单 。 按 下 方向 键 会 让 上 一 个 或 下 一 个 
选项 变 成 选中 项 ， 并 使 它 显示 在 按钮 里 (不必 打开 菜单 ): 


// 如 果 在 菜单 里 按 下 回 车 键 或 空格 键 ， 就 触发 mousedown 事 件 
button.keydown(function(event){ 
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// 找 到 菜单 里 的 选中 列表 项 
var currentSelectedLli = menu.find('1i') 
.eq( selectElement[0].selectedIndex ); 


// 处 理 不 同 的 按键 事件 
switch(event.keyCode){ 
// 如 果 在 菜单 里 按 下 回 车 键 或 空格 键 ， 就 触发 toggle 事 件 
case 13: 
case 32: 
button. trigger('toggle' ); 
return false; 
break; 


// 向 上 或 向 左 方向 键 
case 37: 
Case 38: 
// 如 果 之 前 存在 选项 ， 就 选中 它 
if( currentSelectedLi.prev().length ){ 
currentSelectedLi.prev().find('a') 
.trigger('select'); 
. 
// 防 止 原生 滚动 
return false; 
break; 


// 向 下 或 向 右 方向 键 
case 39: 
case 40: 
// 如 果 之 后 存在 选项 ， 就 选中 它 
if( currentSelectedLi.next().length ){ 
currentSelectedLi.next().find('a') 
.trigger('select'); 


} 
// 防 止 原生 滚动 
return false; 
break; 
} 
}); 








我 们 会 给 菜单 应 用 一 个 逻辑 相似 的 keydown 事 件 ， 不 同 之 处 在 于 方向 键 在 移动 焦点 的 同时 不 
会 改变 选中 项 。 这 样 用 户 就 可 以 用 方向 键 浏览 各 个 选项 ， 然 后 用 Tab 键 在 不 进行 选择 的 情况 下 离 
开 。 按 下 空格 键 或 回 车 键 会 触发 获得 焦点 的 锚 元 素 的 select 事 件 ， 关 闭 菜单 ， 然 后 将 焦点 转 回 到 
菜单 按钮 上 。 所 有 这 些 按键 操作 都 会 返回 false。 

按 下 Tab 刍 时， 隐藏 菜单 并 将 焦点 转 回 到 菜单 按钮 上 ， 这 样 焦点 就 会 跳 到 下 一 个 可 获得 焦点 
的 网 页 元 素 上 ， 这 么 做 是 为 了 确保 制 表 键 焦点 遵循 用 户 期 望 的 制 表 键 顺序 : 


// 菜 单 的 keydown 事 件 
menu.keydown(function(event){ 
//switch 根 据 按键 情况 应 用 不 同 的 逻辑 
switch(event.keyCode){ 
// 如 果 在 菜单 里 按 下 的 是 回 车 键 或 空格 键 ， 就 触发 mouseup 事 件 
case 13: 
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case 32: 
// 触发 select 事 件 
$(event .target) .trigger(" select '); 
button[0].focus(); 
return false; 
break; 


// 向 上 或 向 左 方向 键 
case 37: 
case 38: 
// 如 果 之 前 有 可 选项 ， 就 让 它 获得 焦点 
if( $(event.target).parent().prev().length ){ 
$(event.target).parent().prev().find('a')[0] 
.focus(); 


} 
// 防 止 原生 滚动 
return false; 
break; 
// 向 下 或 向 右 方向 键 
Case 39: 
Case 40: 
// 如 果 之 后 有 可 选项 ， 就 让 它 获得 焦点 
if( $(event.target).parent().next().length ){ 
$(event .target).parent() .next().find('a')[o0] 
.focus(); 
} 


// 防 止 原生 滚动 
return false; 
break; 
//Tab 键 使 焦点 返回 到 菜单 按钮 上 
// 让 浏览 器 能 够 自动 把 焦点 转移 到 下 一 个 可 获得 焦点 的 网 页 元 素 上 
Case 9: 
menu.trigger( hide' ); 
button[0].focus(); 
break; 
} 
}); 


最 后 , 因为 原生 和 自 定义 的 下 拉 菜 单 执行 相同 的 功能 , 所 以 我 们 会 应 用 一 些 属性 来 隐藏 原生 
的 下 拉 莱 单 : 


selectElement.addClass('select-hidden').attr('aria-hidden', true); 





17.3 让 自 定义 下 拉 菜 单 更 进一步 : 给 选项 添加 高 级 样式 


上 面 的 自 定 义 下 拉 菜 单 范例 表现 了 简单 的 文本 格式 和 图 像 有 些 设计 可 能 会 借助 更 丰富 的 文 
字 格 式 来 应 用 视觉 层级 。 举 个 例子 ,请 考虑 这 个 要 求 用 户 选 择 相 册 的 自 定义 下 拉 菜 单 ， 如 图 17-7 
所 示 。 

我 们 无 法 用 原生 的 select 元 素 实现 这 种 级 别 的 视觉 样式 ， 因 为 它 的 能 力 有 限 〈 它 的 子 option 
元 素 不 能 包含 HTML 标 签 )， 所 以 不 得 不 创建 一 个 自 定义 的 下 拉 菜单 来 实现 它 。 重 要 的 问题 在 于 ， 
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有 没有 办 法 能 用 原生 的 select 元 素来 创建 这 个 增强 自 定义 下 拉 菜 单 (以 保留 它 的 完整 可 访问 性 )， 
然后 用 上 面 范例 里 的 数据 挖掘 方式 创建 一 个 通用 脚本 来 转变 它 ? 




















Choose Photo Album: | Kate's Birthday wa 


Summer Party | 
Fun at the lake house 
(Created August 12, 2009) 


Kate's Birthday 
Cake and presents 
(Created Moy 13, 2009) 


Dance Recital 
First one of the year | 
| {Creoted February 6, 2009) 























17-7 带 有 多 行文 本 格式 样式 的 自 定义 下 拉 菜 单 设计 


乍 一 看 , 用 原生 select 里 的 内 容 来 表达 这 种 级 别 的 内 容 层 级 似乎 是 不 可 能 的 , 但 其 实 这 是 可 
以 做 到 的 。 我 们 只 需 格式 化 各 个 原生 option 里 的 文本 来 划分 出 独立 的 三 行 (标题 、 摘 述 和 日 期 )， 
让 它们 为 自 定义 下 拉 菜 单 里 的 样式 做 好 准备 。 然 后 就 可 以 在 自 定义 下 拉 菜 单 里 用 JavaScript 解 析 这 
些 文本 并 格式 化 成 HTML。 

首先 , 考虑 如 何 能 在 不 牺牲 基本 体验 可 用 性 的 前 提 下 , 用 HIML 的 字符 和 标点 符号 来 制作 增 
强 版 里 的 格式 。 举 个 例子 ， 可 以 用 连 字符 和 括号 划分 各 行文 字 : 

My Title -- This is a description (Created January 12, 2009) 


我 们 会 把 这 种 文本 格式 放 入 select 元 素 的 基础 标记 里 ， 如 图 17-8 所 示 。 


<Select name="album" id="album"> 
<option value="albumA">Summer Party -- Fun at the lake house (Created August 12, 2009)</option> 
<option value="albumB">Kate's Birthday -- Cake and presents (Created May 13, 2009)</option> 
<option value="albumC">Dance Recital -- First one of the year (Created February 6, 2009)</option> 
</select> 


Choose Photo Album:| Kate's Birthday 一 Cake and presents (Created May 13, 2009) 证 


| Summer Party -- Fun atthe lake house (Created August 12, 2009) 
Kate's Birthday -~ Cake and presents (Created May 13, 
| Dance Recital -- First one of the year (Created February 6, 2009) 

































图 17-8 ”基本 体验 里 用 简单 标点 符号 格式 化 后 的 文本 


然后 , 为 了 转换 列表 项 标记 , 用 一 个 JavaScript 正 则 表达 式 来 寻找 并 替换 随 HTML 添 加 的 标点 
符号 。 正则 表达 式 提供 了 许多 由 特殊 字符 构成 的 模式 来 寻找 文本 字符 串 , 而 JavaScript 让 我 们 可 以 
对 它们 进行 操作 。 我 们 会 编写 一 个 正则 表达 式 来 寻找 连 字 符 和 括号 ， 并 把 它 保 存在 一 个 名 为 
pattern 的 变量 里 : 
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var pattern = /([\s\S]+)\-\- ([\s\S]+) (\([\s\S]+\))/; 

这 个 表达 式 会 截取 我 们 想 要 匹配 的 3 个 片段 : 标题 、 描 述 和 日 期 (上面 代 码 里 的 高 亮 部 分 )。 

JavaScript 会 自动 给 每 个 片段 都 指派 一 个 变量 名 , 所 以 可 以 很 方便 地 用 变量 $1、$2 和 $3 来 指 代 
正则 表达 式 里 对 应 的 各 个 部 分 。 用 这 些 美元 符号 变量 所 引用 的 3 个 正则 表达 式 片 段 来 构建 各 个 文 
本 行 的 新 增强 标记 ， 并 将 它 保存 在 一 个 名 为 replacement 的 变量 里 : 


var replacement = '<span class="option-title">$1</span>'+ 
‘<span class="option-description">$2</span>'+ 
"<span class="option-date">$3</span>'; 


增强 脚本 生成 自 定义 下 拉 菜 单 后 ,我们 会 运行 一 小 段 脚 本 来 获取 增强 标记 里 的 各 个 选项 文 
本 ， 然 后 将 它们 替换 成 格式 化 后 的 对 应 标记 ,方法 是 在 JavaScript 的 replace 方 法 里 引用 pattern 和 


-于 


replacement 变 量 : 




















menu.find('li a').each(function(){ 
// 获 取 锚 元 素 的 文本 
var text = $(this).text(); 


// 把 锚 元 素 的 HTML 替 换 成 新 格式 化 后 的 标记 
$(this).html( text.replace(pattern,replacement) ); 
}); 


生成 的 增强 标记 现在 就 包含 了 span 标 签 ， 它 们 替代 了 我 们 在 基础 标记 里 使 用 的 标点 符号 : 


<ul id="album-menu” class="custom-select"> 
<li class="option-selected"> 
<span class="option-title">Summer Party</span> 
<span class="option-description">Fun at the lake house</span> 
<span class="option-date">Created August 12, 2009</span> 
</1i> 


ul> 

把 标记 插入 网 页 之 后 ， 就 可 以 用 CSS 来 给 这 些 span 元 素 添 加 样式 , 使 它们 看 上 去 接近 我 们 的 
目标 设计 ; 

#album-menu 1i a span.option-title { 


font-weight: bold; 
display:block; 








#album-menu 1i a span.option-date { 
display:block; 
font-size: .9em; 
font-style: italic; 

} 


17.4 ”使 用 自 定义 下 拉 菜 单 脚 本 


本 书 附带 的 演示 和 代码 ( 位 于 www.flamentgroup.com/dwpe ) 包含 一 个 名 为 jQuery.selectmenu. 
js 的 脚本 , 它 能 用 本 章 概述 的 原则 自动 创建 自 定义 下 拉 菜 单 ,并 提供 完整 的 ARIA 和 键盘 导航 支持 。 
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这 个 脚本 还 模拟 了 原生 select 的 搜索 输入 提示 行为 : 当 用 户 在 获得 焦点 的 自 定 义 下 拉 沫 单 里 按 下 
字母 键 时 ， 它 会 选中 第 一 个 以 这 个 字母 开头 的 选项 。 

要 在 你 的 网 页 里 使 用 这 个 脚本 , 请 下 载 并 引用 下 拉 菜 单 页 里 显示 的 那些 文件 , 然后 在 网 页 里 
对 某 个 select 元 素 调用 selectmenu 方 法 ， 就 像 下 面 的 代码 所 演示 的 : 

$( "select#foo' ) .Selectmenu(); 

maxHeight 选 项 用 来 设置 选项 列表 菜单 的 最 大 像素 高 度 。 如 果 选 项 列表 的 高 度 超过 了 这 个 值 ， 
就 会 出 现 一 个 垂直 滚动 条 : 

$( "select#foo' ) .Selectmenu({ 


maxHeight: 300 


]); 
要 格式 化 自 定 义 下 拉 荣 单 里 各 个 菜单 项 的 文本 , 可 以 定义 一 个 接受 单个 参数 (text ) 的 函数 ， 
这 个 参数 代表 了 各 个 列表 项 的 文本 。 举 个 例子 , 这 段 代 码 会 用 一 个 span 围 住 自 定义 下 拉 菜 单 里 的 
各 个 选项 : 
$(" select ' ) .selectmenu({ 
format: function(text){ 


// 将 自 定义 选项 文本 包装 在 span 中 
return ''+text+'</span>'; 




















)， 
]); 


这 个 格式 选项 可 用 于 创建 17.3 节 讨论 的 多 行 分 别 格式 化 的 例子 。 

在 替换 任何 原生 表单 元 素 时 ， 我 们 总 是 想 确保 增强 的 组 件 至 少 有 着 与 原生 元 素 相 同 的 能 
然后 才 会 用 非 原 生 的 功能 来 扩展 这 个 组 件 。 这 就 意味 着 它 的 所 有 功能 ( 比如 键盘 快捷 方式 和 可 访 
问 性 属性 ) 必须 和 原生 控件 一 样 表 现 良好 ,才能 确保 那些 期 望 自 定义 下 拉 菜 单 能 比拟 标准 select 
控件 的 用 户 不 会 感到 受挫 或 者 困惑 。 

我 们 通过 本 童 的 自 定义 下 拉 菜 单 组 件 寻 找到 了 一 种 方法 ， 既 能 获取 原生 select 的 所 有 优点 ， 
又 能 至 加 增强 信息 以 丰富 用 户 体验 ， 还 采用 了 通用 的 逻辑 ， 减 经 了 开发 者 的 负担 。 
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随 着 Web 应 用 程序 逐渐 接近 桌面 应 用 程序 的 功能 , 我 们 会 遇 到 越 来 越 多 某 个 UI 元 素 没 有 原生 
HTML 先 例 的 情况 。 列 表 生 成 器 组 件 (list builder ) 就 是 这 样 一 个 例子 。 
列表 生成 器 最 简单 的 形式 是 在 一 个 可 编辑 的 区 域内 归 组 若干 单词 或 短语 。 各 个 条 目 通 常会 装 在 
带 有 边框 或 背景 色 的 “盒子 ”里 ， 使 列表 便于 浏览 、 编 辑 和 删除 。 而 且 因 为 每 个 条 目 都 被 视 为 一 个 
独立 的 单元 , 所 以 可 以 给 它们 添加 更 为 丰富 的 交互 手段 ， 比 如 多 选 、 拖 放 、 操 作 按 钮 和 上 下 文 菜 单 。 
列表 生成 器 这 种 交互 方式 可 以 在 各 种 常见 的 Web 应 用 程序 里 找到 ， 包 括 : 
> 在 带 有 标签 系统 的 网 站 里 ， 用 户 输入 若干 单词 或 短语 来 描述 照片 、 文 档 、 地 图 兴趣 点 、 
视频 或 书签 ; 
> 某 些 Email 应 用 程序 会 帮助 创建 To ( 收 件 人 )、Cc ( 抄 送 ) 和 Bcc ( 秘密 抄 送 ) 字段 里 的 收 
件 人 列表 ; 
> 在 日 用 百货 送 货 服务 和 其 他 基于 列表 的 购物 网 站 里 ， 用 户 可 以 快速 添加 、 移 动 和 删除 列 
表 项 。 
许多 复杂 的 列表 生成 器 加 入 了 自动 完成 功能 , 会 给 出 系统 里 现 有 的 建议 值 , 例如 已 经 用 于 其 
他 物品 的 标签 ， 或 者 用 户 地 址 短 里 保存 的 电子 邮件 信息 ， 如 图 18-1 所 示 。 


To | Nathan Williams 回 BillJohnson @ James Kol 


图 18-1 一 个 消息 接收 者 列 表 生 成 器 组 件 


本 章 会 描述 如 何 使 用 可 访问 的 标准 HIML 表 单 控件 构建 一 个 简单 的 列表 生成 器 ， 然 后 用 
JavaScript 把 它 转变 成 以 基本 版 功能 为 基础 的 交互 式 组 件 , 同 时 还 保留 原生 元 素 所 有 的 可 访问 性 功 
能 。 然 后 ， 讨 论 如 何 增强 一 个 标准 的 列表 生成 器 ,给 它 添加 多 项 选择 、 拖 放 排序 、 自 动 完成 和 上 
下 文 菜单 等 更 为 复杂 的 功能 。 





























br 





18.1 X 光 透视 


首先 ， 我 们 会 考虑 一 个 相当 简单 的 列表 生成 器 ， 它 的 作用 是 给 某 张 照片 添加 描述 性 的 标签 ， 
如 图 18-2 所 示 。 
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yellow flower.jpg 


PHOTO TAGS: 


[ yellow *|(o flowers %| natl 











图 18-2 ”照片 标签 列表 生成 器 的 目标 设计 


这 个 目标 设计 展示 了 归 组 到 可 编辑 文本 框 中 的 一 列 标 签 ， 其 中 每 一 项 都 带 有 边框 和 背景 
像 ， 使 它 看 起 来 像 个 图 标 式 标签 。 每 个 标签 都 附带 一 个 小 小 的 移 除 按钮 来 快速 一 键 删除 此 标签 ， 
用 户 还 可 以 方便 地 在 文本 框 容器 中 输入 ， 从 而 添加 新 标签 。 

这 个 列表 生成 器 的 设计 包含 了 许多 高 级 功能 : 自 定 义 样式 , 各 个 条 目 上 的 移 除 按钮 ， 以 及 一 
个 自 定义 样式 的 Save Tags (保存 标签 ) 提交 按钮 。 但 是 用 X 光 透视 这 个 设计 时 ， 我 们 发 现 上 述 功 
能 不 属于 这 个 工具 的 核心 部 分 : 列表 生成 器 的 关键 功能 是 提供 一 种 途径 来 输入 和 提交 一 个 或 多 个 
单词 和 短语 。 我 们 的 基础 标记 可 以 用 一 个 文本 输入 表单 元 素来 实现 列表 生成 器 所 有 的 关键 功能 ， 
它 接 受 一 个 由 空格 或 逗号 分 隔 的 列表 ， 后 面 跟着 一 个 标准 的 提交 按钮 。 

有 两 个 HTML 元素 ( 文本 input 和 textarea ) 可 以 满足 这 些 要 求 。 它 们 都 具备 可 能 有 用 的 独特 
功能 。 

> 文本 input 内 建 了 限制 条 件 : 它 接受 单行 文本 ， 而 且 只 显示 它 的 固定 尺寸 能 够 容纳 的 字符 

数量 。( 虽然 input 元 素 从 技术 上 说 可 以 接受 超出 其 尺寸 大 小 的 内 容 , 但 是 用 户 需要 用 方向 
键 才 能 看 到 超出 可 见 区 域 的 字符 。) 它 对 那些 限制 字符 数量 的 案例 来 说 是 理想 的 选择 。 
> textarea 容 许 更 大 的 灵活 性 : 它 可 以 接受 多 行 输入 , 而 且 会 在 内 容 超 出 可 见 区 域 时 自动 添 
加 滚动 条 。 
有 经 验 的 Web 用 户 通 常会 根据 显示 的 元 素 类 型 来 理解 某 一 系统 的 限制 , 并 假定 字段 的 尺寸 暗 




















因此 在 基础 标记 里 使 用 一 个 textarea 元 素来 帮助 用 户 了 解 这 一 点 ， 如 图 18-3 所 示 。 
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Photo tags: 
yellow, flowers, nat| 
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图 18-3 ”列表 生成 髓 的 基本 体验 


增强 版 列表 生成 器 组 件 所 包含 的 功能 要 比 textarea 原 生 支 持 的 更 为 复杂 ( 举 个 例子 , 每 个 照 
片 标签 都 有 自 定 义 的 样式 和 一 个 内 建 的 移 除 按钮 )， 所 以 增强 版 组 件 应 该 由 通过 JavaScript 搬 入 网 
页 的 新 标记 构建 。 我 们 会 给 一 个 标准 的 无 序列 表 (ul ) 添加 样式 来 容纳 标签 ， 它 的 最 后 一 项 总 是 
包含 一 个 空白 的 文本 input 以 便 进行 新 的 内 联 输入 。 

为 了 简化 服务 器 端的 表单 处 理工 作 , 我 们 会 遵循 标准 代理 模式 : 增强 版 的 列表 生成 器 组 件 会 
在 页 面 加 载 时 创建 , 随后 脚本 会 检查 基础 标记 里 的 textarea, 为 每 个 现 有 值 生 成 一 个 无 序列 表 项 。 
添加 或 移 除 生成 器 组 件 里 的 某 个 标签 时 ，textarea 会 被 更 新 ， 使 两 者 无 论 何 时 都 保持 同步 。 在 屏 
幕 上 ,我 们 会 对 用 户 隐藏 基础 HTML 元 素 , 但 让 它 留 在 网 页 的 标记 里 ， 这 样 无 论 是 基本 版 还 是 增 
强 版 的 网 页 都 能 以 相同 的 方式 提交 表单 。 

为 了 保持 可 访问 性 ,增强 版 列表 生成 器 的 构建 方式 必须 能 让 屏幕 阅读 器 用 户 理 解 这 个 组 件 是 
什么 ， 以 及 如 何 使 用 它 。 我 们 会 用 ARIA 属 性 充分 描述 它 的 功能 ， 同 时 让 辅助 技术 能 够 理解 。 


18.2 创建 列表 生成 器 


首先 用 一 个 标准 的 textarea 来 标记 网 页 ， 它 可 以 用 由 逗号 分 隔 的 一 组 简单 的 值 填充 。 然 后 把 
这 些 值 转换 成 增强 体验 里 的 一 组 照片 标签 ， 这 些 标签 带 有 样式 且 可 编辑 。 


18.2.1 基础 标记 和 样式 


列表 生成 器 的 基础 标记 很 简单 : 它 由 一 个 textarea 和 一 个 描述 其 用 途 的 配套 1abel 组 成 ,label 
元 素 的 for 属 性 匹配 这 个 textarea 的 id 属性 ， 这 样 就 能 正确 地 为 屏幕 阅读 融 关 联 它们 。 在 用 户 输 
入 标签 之 前 ， 这 个 textarea 不 包含 任何 值 : 


<label for="tags">Photo tags:</label> 
<textarea id="tags" name="tags"></textarea> 


如 果 用 户 之 前 曾经 给 某 张 照片 输入 过 标签 , 那么 网 页 加 载 时 textarea 元 素 会 被 预先 填充 一 个 
值 , 这 个 值 是 一 列 由 逗号 分 隔 的 现 有 照片 标签 。 在 这 个 例子 里 , 假设 用 户 已 经 给 照片 指派 并 保存 
了 两 个 标签 ( yellow 和 flowers )， 它 们 在 网 页 加 载 时 会 一 起 出 现 : 

<textarea id="tags" name="tags">yellow, flowers</textarea> 

这 有 段 标记 就 位 后 ,可 以 给 列表 生成 器 应 用 一 些 非常 简单 的 CSS 规 则 ,它们 对 几乎 所 有 浏览 器 
而 言 都 是 安全 的 。 
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> 一 个 全 局 的 font-family 列 会 指派 给 body 标 签 和 textarea 元 素 ( 这 一 点 特别 重要 )， 因 为 文 
本 输入 的 表单 元 素 在 大 多 数 浏览 器 里 都 不 会 自动 继承 字体 样式 。 

> 一 个 块 级 的 display 属 性 会 设置 在 label 上 ， 使 它 位 于 在 textarea 上 方 ( 否则 它 会 位 于 左 
侧 )。 

在 基本 样式 表 里 ， 我 们 的 安全 样式 看 起 来 如 下 所 示 : 





body, textarea { font-family: "Segoe UI", Arial, sans-serif; } 
label { display: block; } 


瞧 ! 列表 生成 器 的 基础 标记 就 构建 完了 ， 如 图 18-4 所 示 。 








Photo tags: 


yellow. flowers, nat| 
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图 18-4 ”应 用 安全 样式 后 的 照片 标签 生成 器 基础 标记 


我 们 不 需要 给 基本 体验 添加 任何 可 访问 性 功能 , 因为 所 有 的 原生 HTML 表 单元 素 都 是 可 访问 
的 。 举 个 例子 ， 列 表 生 成 器 的 所 有 常规 功能 都 可 以 用 键盘 命令 访问 和 使 用 : 用 户 可 以 按 下 Tab 键 
使 textarea 获 得 焦点 ， 输 入 由 逗号 分 隔 的 一 列 值 ， 然 后 按 下 Tab 使 “保存 标签 ”按钮 获得 焦点 ， 
从 而 提交 表单 。 











18.2.2 ”增强 标记 和 样式 


列表 生成 器 组 件 的 增强 标记 会 在 能 力 测试 通过 后 由 JavaScript 搬 人 到 网 页 里 ， 并 把 它 的 内 容 
值 传 回 基础 textarea， 用 于 表单 提交 。 

首先 ，textarea 的 功能 会 被 列表 生成 器 组 件 所 取代 ， 因 此 我 们 会 让 它 对 所 有 用 户 隐藏 ， 包 括 
屏幕 阅读 器 (我们 想 让 所 有 人 都 操作 列表 生成 器 组 件 ， 而 完全 忽略 textarea ): 


textarea#tags { display: none; } 








注意 ”请 记 住 这 个 textarea 只 是 对 用 户 隐藏 。 构 建 列 表 生 成 器 脚本 时 , 把 基础 textarea 设 置 成 一 
个 代理 ， 用 于 提交 在 列表 生成 器 里 输入 的 那些 值 。 


现在 万 事 俱 备 ， 可 以 构建 增强 版 列表 生成 器 了 。 用 一 个 class 为 listbuilder 的 无 序列 表 把 标 
签 归 组 成 语义 的 形式 ， 使 它们 能 够 应 用 盒子 风格 的 样式 : 


<ul class="listbuilder"> 





</ul> 


ul 里 所 含 的 每 个 列表 项 (1i ) 都 代表 一 个 独一无二 的 照片 标签 。 
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这 个 无 序列 表 应 该 始终 包含 一 个 带 有 文本 输入 框 的 列表 项 , 以 供用 户 输入 新 的 标签 。 我 们 会 
用 一 个 具有 描述 性 的 类 ( listbuilder-entry-add ) 来 标识 它 。 输 入 框 的 title 属 性 会 在 鼠标 悬 停 
时 显示 出 一 条 工具 提示 ， 并 为 屏幕 阅读 器 提供 朗读 指导 : 


<li class="listbuilder-entry-add"> 
<input type="text" value="" title="To add an item to this list, type a 
name and press enter or comma." /> 

</1i> 








注意 “我们 有 意 省 略 了 这 个 input 上 的 name 属 性 ， 因 为 纯粹 只 是 用 它 来 收集 和 临时 存放 某 个 新 输 
入 的 标签 ， 并 不 需要 将 它 的 值 和 其 余 表 单数 据 一 起 提交 。 





列表 生成 器 脚本 会 在 网 页 载 和 时 为 textarea 里 的 每 一 个 条 目 都 生成 一 个 新 标签 。 各 个 标签 的 
标记 都 是 一 个 列表 项 ， 里 面 用 一 个 span 围 住 照片 标签 的 文本 。 


<]i class="listbuilder-entry"> 
<span class="listbuilder-entry-text">yellow</span> 











</1i> 
每 当 用 户 输入 一 个 单词 或 短语 ， 然 后 加 上 逗号 或 者 直接 按 回 车 键 ， 脚 本 就 会 用 input 的 值 创 


建 一 个 新 的 列表 项 并 将 它 插入 到 标签 列表 的 末尾 ， 可 编辑 列表 项 的 前 面 。 

每 个 照片 标签 还 带 有 一 个 属于 listbuilder-entry-remove 类 的 移 除 链接 ， 它 的 文本 值 是 
Remove ( 移 除 )。 我 们 会 用 CSS 隐 藏 这 个 链接 的 文本 ， 并 用 一 个 紧凑 的 “x” 背 景 图 标 来 取代 它 ， 
另外 再 给 它 添 加 一 个 title 属 性 ， 用 文字 解释 这 个 按钮 的 功能 ( 这 个 属性 会 同时 用 于 原生 的 工具 
提示 和 屏幕 阅读 器 的 有 声 反馈 )， 以 及 一 个 名 为 button 的 ARIA role 来 描述 此 链接 的 用 途 : 


<]i class="listbuilder-entry"> 
<span class="listbuilder-entry-text">yellow</span> 
<a class="listbuilder-entry-remove" title="Remove yellow from the list." 
href="#" role="button">Remove</a> 

</1i> 


最 后 ， 人 处理 基础 的 label 元 素 。 在 基本 体验 里 ，1abel 只 描述 了 textarea; 在 增强 体验 里 ， 它 
则 需要 描述 所 有 这 些 新 的 标记 ( 无 序列 表 结构 ， 用 于 输入 新 条 目的 文本 输入 框 ,文本 span 和 移 除 
按钮 ), 在 这 种 情况 下 单个 label 元 素 是 不 够 用 的 。 为 了 证 它 的 增强 版 角色 更 具 意 义 , 用 JavaScript 
把 它 转变 成 一 个 HTML 标 题 : 

<h2>Photo tags:</h2> 

在 这 个 阶段 , 我们 已 经 确立 了 列表 生成 器 的 增强 标记 : 它 是 一 张 简单 的 标签 无 序列 表 , 后 面 
跟着 移 除 链接 和 一 个 可 编辑 的 文本 输入 框 ， 如 图 18-5 所 示 。 

接 下 来 ， 添 加 CSS 来 装饰 增强 体验 里 的 列表 生成 器 ， 并 给 替换 1abel 元 素 的 列表 生成 器 标题 
应 用 更 大 的 字号 和 粗细 : 


h2 { 
font-size:1.3em; 
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margin: .5em 0; 
font-weight:bold; 
text-transform:uppercase; 


} 





e。 yellow Remove entry 
。 flowers Remove entry 











18-5 用 于 两 个 标签 和 文本 输入 框 的 无 样式 增强 标记 


我 们 会 给 列表 生成 器 的 容 需 〈 岂 ) 应 用 一 些 样 式 ， 比 如 border 和 overflow 属 性 ， 来 模拟 标准 
textarea 的 外 观 和 滚动 行为 。 这 个 列表 生成 器 带 有 中 灰 的 背景 色 以 突出 各 个 标签 ， 并 使 用 CSS3 
的 border-radius 属 性 在 支持 这 一 属性 的 浏览 需 里 圆 化 边 角 : 


ul.listbuilder { 
padding: 0; 
margin: 0; 
background:#88898a; 
list-style:none; 
border:1px solid #4D4D4D; 
overflow:auto; 
cursor:text; 
-moz-border-radius:5px; 
-webkit-border-radius:5px; 
border-radius:5px; 


} 


当 光 标 位 于 列表 生成 器 上 时 它 的 背景 色 会 转变 成 白色 ,使 它 看 起 来 更 像 是 一 个 可 编辑 的 活动 
文本 字段 ， 如 图 18-6 所 示 。 这 一 颜色 变化 靠 的 是 根据 input 的 焦点 状态 给 列表 附加 
listbuilder-focus 类 : 


ul.listbuilder-focus { background: #fff; } 


yellow 等 je flowers 庆 




















lb yellow 莫 ||o flowers 夭 


图 18-6 “列表 生成 器 组 件 的 默认 〈 上 图 ) 状态 和 获得 焦点 (下 图 ) 状态 

















我 们 会 让 所 有 列表 项 和 可 编辑 输入 框 向 左 浮动 , 使 它们 并 排 显示 , 并 添加 一 点 点 外 边 距 来 隔 
开 它 们 : 


ul.listbuilder li { 
float:1left; 
font-size:1.3em; 
margin: 2px 0 2px 2px; 
Color: #333; 
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文 个 可 编辑 文本 框 应 该 能 无 颖 融和 列表 生成 器 的 容器 里 ,所 以 我 们 会 移 除 它 的 边框 、 内 边 距 、 
外 边 距 和 轮廓 线 ， 并 设置 字体 大 小 为 1taem， 使 它 继 承 列 表 的 字体 大 小 : 


ul.listbuilder input { 
font-size:1em; 
margin:0; 
padding:0; 
background:transparent; 
border:0; 
outline:0; 
line-height:1.7; 
color: #fff; 
width: 3em; 

} 


为 了 让 各 个 标签 看 起 来 更 像 标签 ， 我 们 会 应 用 两 张 背景 图 像 : 一 张 在 上 ， 指派 给 1i, 男 一 张 
在 下 ， 指派 给 span。 以 这 种 方式 使 用 这 两 张 “滑动 门 ”效果 的 背景 图 像 ， 可 以 确保 背景 能 灵活 适 
应 文字 大 小 ， 比 如 用 户 用 浏览 需 控 件 调 整 文字 大 小 时 。 把 span 设 置 成 display: block， 使 它 填 满 
可 用 空间 ， 并 在 右边 额外 添加 25 像 素 的 内 边 距 来 容纳 移 除 链接 : 


ul.listbuilder 1i.listbuilder-entry { 
position:relative; 
cursor:default; 
border-right:1px solid #7d7d7d; 
background:#eee url(../images/bg-tag-top.png) top left no-repeat; 


ul.listbuilder span.listbuilder-entry-text { 
display:block; 
padding: .2em 25px .4em 18px; 
background:url(../images/bg-tag-bottom.png) bottom left no-repeat; 


最 后 ， OR a fst dat 然后 用 背景 图 标 取代 它 。 我 
们 还 会 绝对 定位 这 个 链接 ， 这 样 它 就 会 始终 位 于 标签 文本 的 右 侧 : 


ul.listbuilder 11.1istbuilder-entry a.listbuilder-entry-remove { 
position:absolute; 
right: .3em; 
top: 50%; 
margin-top:-5px; 
width:11px; 
height:11px; 
text-indent:-99999px; 
overflow:hidden; 
background:url(../images/icon remove.png) 0 0 no-repeat; 


} 


18.2.3 ”列表 生成 器 脚本 


能 力 测试 在 运行 时 会 插入 增强 CSS 和 脚本 ,在 通过 测试 的 浏览 器 里 创建 列表 生成 器 组 件 。 列 
表 生 成 器 脚本 会 做 许多 事 。 
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(1) 生成 增强 版 列表 生成 器 的 标记 ， 用 textarea 里 找到 的 初始 值 填 充 列 表 。 

(2) 根据 用 户 的 输入 添加 新 标签 ， 实 现 方式 是 等 待 文本 输入 框 里 的 键盘 事件 。 

(3) 创建 一 个 代理 函数 ， 用 列表 生成 器 里 的 标签 组 持续 更 新 原 有 的 textarea， 使 它们 始终 保 
持 同步 ， 便 于 提交 表单 。 

(4) 给 列表 应 用 鼠标 点 击 行为 来 移 除 标签 ， 显 示 视 觉 反 馈 ， 以 及 让 光标 聚焦 到 可 编辑 文本 输 
入 框 里 。 

(5) 把 基础 标记 里 的 1abel 元 素 转 变 成 语义 更 加 恰当 的 增强 控件 标题 。 

















注意 ”本章 描述 的 脚本 编写 原则 无 论 对 textarea 还 是 input 都 适用 ， 因 为 两 者 的 增强 体验 是 一 
样 的 。 


1. 生成 增强 标记 

列表 生成 器 脚本 会 根据 基础 标记 里 某 一 个 textarea 的 特性 生成 组 件 。 首 先 ， 确定 哪个 
textarea 将 成 为 列表 生成 器 ， 然 后 收集 它 的 相关 信息 ， 包 括 它 的 宽度 和 当前 值 ( 考虑 到 它 可 能 预 
先 填充 了 一 组 标签 )。 和 其 他 脚本 范例 一 样 ， 我 们 会 对 这 些 变量 使 用 jQuery 表示 法 。 

var textarea = $( "textaTea#tags' ); 


var textareaWidth = textarea.width(); 
var textareaValue = textarea.val(); 


用 这 些 变量 创建 一 个 空白 的 由 作为 列表 生成 器 的 容器 , 并 将 它 的 宽度 设置 成 原 有 textarea 的 








ei 
we 


var listbuilder = $('<ul class="listbuilder"></ul>') 
.width( textareaWidth ); 


生成 列表 生成 器 组 件 内 容 的 第 一 步 是 为 textarea 里 的 现 有 值 创 建 标 签 。 利 用 保存 在 
textareaValue 变 量 里 的 textarea 值 ， 为 每 个 用 逗号 或 换行 符 分 隔 的 单词 或 短语 都 生成 一 个 新 的 
1i， 然 后 把 它们 作为 标签 附 到 列表 生成 器 上 。 

为 此 ， 用 JavaScript 原 生 的 split 方 法 把 textarea 里 的 值 拆 分 成 一 个 值 数组 ， 做 法 是 指定 用 于 
划分 各 个 条 目的 字符 。 举 个 例子 ， 要 在 每 个 逗号 的 位 置 拆 分 值 ， 传 递 一 个 逗号 字符 串 作 为 split 
方法 的 参数 : 

textareaValue.split(','); 

split 方 法 还 接受 正则 表达 式 以 匹配 更 复杂 的 模式 。 为 了 在 恰当 的 位 置 拆 分 这 个 用 于 列表 生 
成 器 的 字符 串 值 ， 使 用 正则 表达 式 /[,\n]/， 它 会 寻找 每 一 处 逗号 〈，) 或 换行 符 ( \n )。( 这 里 的 
斜 杠 表示 正则 表达 式 的 开头 和 结尾 ， 方 括号 里 描述 了 一 个 或 多 个 用 于 匹配 的 字符 。) 我 们 会 创建 
一 个 新 的 变量 ( textareaValueArray ) 来 存放 拆 分 后 的 值 数组 : 

var textareaValueArray = textareaValue.split(/[,\n]/); 

使 用 jQuery 的 each 方 法 遍历 这 个 数组 ， 给 每 个 标签 值 都 生成 一 个 列表 项 ， 然 后 把 它们 一 次 性 
附加 到 ul 上 以 优化 性 能 。 如 果 这 个 数组 没有 任何 值 ，each 方 法 就 只 会 做 0 次 循环 ,不 会 产生 错误 : 
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$.each( textareaValueArray, function(){ 
/* 创 建 对 当前 项 目 值 的 引用 */ 
var val = this; 


/* 给 列表 生成 器 增加 一 个 新 的 列表 项 */ 
listbuilder.append('<l1i class="listbuilder-entry"> 
w<span class="listbuilder-entry-text">'+val+' </span> 
wa href="#" class="listbuilder-entry-remove" 
wtitle="Remove '+val+' from the list." role="button"> 
wRemove</a></1i>'); 


}; 
接 下 来 , 我 们 会 附 上 可 编辑 的 列表 项 , 让 用 户 给 列表 添加 新 的 标签 。 如 果 没 有 已 存在 的 标签 ， 
这 个 输入 框 就 会 是 列表 生成 絮 容 琐 里 的 唯一 一 项 ; 如 果 有 其 他 项 , 它 将 始终 是 列表 里 的 最 后 一 项 。 


listbuilder.append('<li class="listbuilder-editable"> 
winput type="text" value="" 

wtitle="Type a name and press enter or comma 

wto add it to the list." /></1i>'); 


最 后 ， 把 列表 生成 需 搬 和 到 网 页 里 : 
listbuilder.insertAfter( textarea ); 


2. 让 原本 的 textarea 保 持 同步 

虽然 原本 的 基础 textarea 被 隐藏 到 视野 之 外 , 但 它 在 后 台 仍 然 是 必要 的 ,用 于 获取 标签 值 并 
在 用 户 点 击 “ 保 存 标签 ”按钮 时 提交 给 服务 器 。 如 此 使 用 隐藏 textarea 之 后 ， 就 能 在 基本 体验 和 
增强 体验 里 用 同一 种 方法 处 理 表单 。 

为 此 ， 使 用 一 种 “代理 ”模式 : 当 用 户 与 增强 版 列表 生成 器 进行 交互 时 ,我 们 的 脚本 会 用 当 
前 的 这 组 值 更 新 原本 的 隐藏 textarea。 脚 本 会 遍历 列表 里 的 所 有 条 目 ， 把 它们 的 值 保 存在 由 逗号 
分 隔 的 字符 串 里 ， 然 后 用 这 个 字符 串 设 置 textarea 的 值 。 我 们 会 把 这 段 逻 辑 写 入 一 个 独立 的 函数 
( updateValue )， 这 样 每 当 用 户 通过 添加 、 编 辑 或 删除 标签 来 更 新 列表 时 ， 我 们 就 可 以 调用 它 : 

function updateValue(){ 


/* 创建 一 个 数组 来 存放 新 值 */ 
newTextareaValue = []; 



































/* 遍 历 各 个 列表 项 的 文本 ， 把 它 添加 到 数组 中 */ 
listbuilder.find('span.listbuilder-entry-text').each(function(){ 
newTextareaValue.push( $(this).text() ); 


})s 


/* 添加 input 元 素 的 值 作为 最 后 一 个 列表 项 */ 
newTextareaValue.push( listbuilder.find('input').val() ); 


/* 把 这 些 列 表 项 用 运 号 连接 起 来 ， 然 后 填 入 textarea */ 
textarea.val( newTextareaValue.join(',') ); 
}; 
3. 给 列表 应 用 点 击 行为 
从 列表 里 移 除 条 目的 脚本 非常 简单 :用 户 点 击 移 除 按钮 后 , 它 对 应 的 列表 项 会 从 页 面 中 移 除 ， 
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textarea 的 值 则 会 通过 调用 updatevalue 函 数 更 新 为 新 的 列表 。 给 列表 生成 器 的 容器 一 次 性 添加 这 
个 点 击 事件 , 然后 用 事件 指派 确保 所 有 的 移 除 链接 ( 包括 列表 里 现 有 的 以 及 后 续 可 能 会 添加 到 列 





表 的 那些 ) 都 会 获得 这 个 行为 。 
listbuilder.click(function(ev){ 


// 创 建 对 被 点 击 元 素 的 引用 
var clickedElement = $(ev.target); 


// 检 查 被 点 击 元 素 是 否 是 一 个 移 除 链接 
if(clickedElement.is('a.listbuilder-entry-remove' ) ){ 


// 移 除 上 级 列表 项 
clickedElement.parent().remove(); 


} 


// 让 点 击 事件 返回 false 
return false; 


























)); 

我 们 需要 给 列表 生成 高 的 点 击 事件 再 添加 一 种 情形 : 当 用 户 点 击 列 表 和 后 成 需 但 不 是 为 了 移 除 
标签 时 ， 我 们 想 把 光标 的 焦点 移 到 可 编辑 输入 框 字 段 上 。 这 样 ， 列 表 生 成 器 就 会 感觉 像 是 一 个 原 
生 的 textarea : 


listbuilder.click(function(ev){ 

var clickedElement = $(ev.target); 

if(clickedElement.is('a.listbuilder-entry-remove' ) ){ 
clickedElement.parent().remove(); 

} 

else { 
// 把 焦点 移 到 最 后 一 项 的 input 元 素 上 
listbuilder.find('input').focus(); 


return false; 


5 





我 们 还 想 在 列表 生成 器 获得 焦点 时 提供 视觉 反馈 。 
添加 或 移 除 之 前 创建 的 listbuilder-focus 类 : 


listbuilder.find('input') 
.focus(function(){ 
listbuilder.addClass('listbuilder-focus'); 





.blur(function(){ 
listbuilder.removeClass('listbuilder-focus'); 


}); 
4. 添加 新 标签 


为 此 


， 利 用 输入 框 的 focus 和 blur 事 件 来 














当 用 户 在 获得 焦点 的 文本 输入 框 里 按 下 某 个 键 时 , 我 们 会 把 键 值 传 回 基础 的 textarea 让 这 些 
控件 保持 同步 。 如 果 用 户 按 下 的 是 用 于 添加 标签 的 两 个 键 〈 逗号 或 回 车 键 ) 之 一 ,就 会 在 增强 版 
列表 生成 天 控 件 里 生成 一 个 包含 input 值 的 标签 。 用 keydown 事 件 给 列表 生成 需 的 容 需 绑 定 所 有 这 
些 逻 辑 , 这 个 事件 会 在 按 下 茶 个 键 , 但 相应 的 字符 ( 回 车 或 逗号 ) 尚未 添加 到 输入 框 的 值 时 触发 : 
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listbuilder.find('input') 
// 添 加 Keydown 事 件 
.keydown(function(ev){ 


// 保 存 对 input 的 引用 
var input = $(this); 


// 检 查 按键 是 否 是 过 号 (188) 或 者 回 车 (13) ,并 且 值 不 是 空白 的 ， 或 者 仅 有 一 个 过 号 
if( (ev.keyCode == 188 || ev.keyCode == 13) 
&& input.val() != "''" ){ 


// 保 存 对 各 号 之 前 的 值 的 引用 
var val = input.val().split(',')[0]; 


// 在 它 之 前 插入 一 个 新 的 列表 项 ， 其 中 包含 新 的 文本 
input.parent().before( '<li class="listbuilder-entry"> 
<span class="listbuilder-entry-text">'+val+'</span> 
<a href="#" class="listbuilder-entry-remove" 
title="Remove '+val+' from the list." role="button"> 


Remove</a></1i>'); 


// 重 置 input 的 值 
input.val(''); 





} 


// 无 论 上 面 这 些 条 件 的 结果 如 何 

// 如 果 按 下 的 键 是 各 号 或 者 回 车 ， 就 阻止 它 完成 按键 事件 

if(ev.keyCode == 188 || ev.keyCode == 13){ 
ev.preventDefault(); 

} 


}); 

和 触发 keyup 事 件 后 ， 脚 本 会 运行 这 个 updatevalue 函 数 来 确保 textarea 始 终 包 含 了 列表 生成 器 
里 所 有 最 新 的 条 目 ， 包 括 当 前 正在 输入 的 不 完整 条 目 : 

listbuilder.find('input') 

// 指 派 keyup 事 件 

.keyup(function(){ 


// 更 新 textarea 
updateValue(); 


}); 
最 后 ， 用 一 个 标题 来 蔡 换 基础 的 label 元 素 ， 用 于 整个 列表 生成 器 控件 : 


// 通 过 for 属 性 找到 标签 
var label = $('label[for='+ textarea.attr('id') +']'); 








// 使 用 jQuery 的 replaceWith 方 法 把 标签 替换 为 一 个 h2 元 素 
label.replaceWith('<h2>'+label.text()+'</h2>'); 


我 们 的 脚本 现在 已 经 能 把 一 个 普通 的 textarea 转 变 成 交互 性 丰富 的 列表 生成 器 , 可 以 通过 添 
加 样式 来 满足 任何 应 用 程序 的 需求 ， 如 图 18-7 所 示 。 
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图 18-7 “最终 的 增强 版 列表 生成 需 组 件 





18.3 让 列表 生成 器 更 进一步 ， 多 项 选择 、 排 序 、 自 动 完成 和 上 下 文 
菜单 


到 目前 为 止 ,我们 分 析 了 从 textarea 创 建 列 表 生 成 器 的 基本 原理 。 列 表 生 成 器 创建 出 来 之 后 ， 
可 以 给 它 添加 一 系列 额外 的 功能 ， 从 而 进一步 提升 这 个 列表 生成 器 的 用 处 和 可 用 人性。 








18.3.1 多 项 选择 


同时 选择 和 操作 多 个 项 目 (方法 是 按 住 Control 或 Shift 键 然后 点 击 列表 生成 器 里 的 各 个 项 目 )， 
能 让 人 感觉 它 更 像 是 一 个 桌面 风格 的 高 级 组 件 , 而 且 还 消除 了 不 必要 的 重复 操作 , 从 而 显著 提升 了 
用 户 的 效率 。 可 以 添加 逻辑 代码 来 实现 这 个 功能 ， 方 法 是 在 用 户 点 击 某 项 时 留意 特定 的 键盘 事件 。 

举 个 例子 ， 用 户 可 能 想 编辑 “ 收 件 人 ”字段 里 的 一 长 串 邮 箱 地 址 。 启 用 多 项 选择 后 ， 就 可 以 
按 住 Shift 刍 并 点 击 (或 者 使 用 方向 键 ) 选择 多 个 连续 的 邮箱 地 址 ， 也 可 以 按 下 Control 键 选择 不 同 
列表 位 置 上 的 多 个 邮箱 地 址 。 

请 注意 ， 本 书 附带 的 列表 生成 器 插件 脚本 ( 位 于 www.filamentgroup.com/dwpe ) 会 自动 包含 
这 一 功能 。 


18.3.2 ” 拖 放 排序 
如 果 在 某 些 情况 下 列表 生成 器 里 的 项 顺序 很 重要 , 你 可 以 考虑 加 入 点 击 拖 动 功能 来 支持 列表 
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项 的 重新 排序 。 这 一 行为 可 以 使 用 jQuery UI 的 可 排序 插件 实现 (位 于 jQueryUI.com )。 加 入 jQuery 
UI 的 核心 和 可 排序 插件 ， 并 对 列表 生成 器 的 容器 调用 sortable 方 法 后 , 里 面 的 列表 项 就 可 通过 拖 
放 操 作 来 重 排 顺 序 了 。 


18.3.3 ”自动 完成 


许多 列表 生成 器 的 实现 都 带 有 自动 完成 功能 ， 它 会 在 用 户 输入 新 条 目 时 提供 一 张 建 议 值 列 
表 。 这 个 功能 用 jQuery UI 的 自动 完成 组 件 很 容易 实现 。 自 动 完 成 功能 的 配置 根据 不 同 的 数据 来 源 
和 结构 有 所 区 别 ， 要 了 解 jQuery UI 自动 完成 组 件 的 更 多 功能 信息 或 者 下 载 这 个 组 件 ， 请 访问 
jQueryUILcom。 

实现 自动 完成 功能 时 ， 值 得 考虑 的 一 点 是 要 不 要 在 基本 体验 里 同样 提供 自动 完成 建议 列表 ， 
具体 做 法 是 设置 一 个 导航 到 另 一 个 网 页 的 链接 , 建议 值 用 单 选 按钮 或 复 选 框 的 形式 放 在 那个 网 页 
里 。 举 个 例子 , 某 个 电子 邮件 收 件 人 列表 生成 器 可 以 在 textarea 边 上 放置 一 个 “地 址 短 ”( Address 
Book ) 链接 , 用 来 将 用 户 导 航 至 另 一 张 带 有 联系 人 核对 清单 的 网 页 。 用 户 可 以 选择 若干 联系 人 的 
地 址 ， 然 后 点 击 “ 添 加 收 件 人 ”( Add Recipients ) 按钮 生成 收 件 人 列表 。 在 增强 体验 里 ， 联 系 人 
列表 可 以 用 HTML 、JSON 或 XML 格式 借助 Ajax 获取 ， 然 后 填 人 自动 完成 菜单 以 实现 更 快速 和 更 
具 交 互 性 的 体验 。 






























































18.3.4 上 下 文 菜单 


另 一 种 扩展 列表 生成 避 的 有 力 方 式 是 给 每 个 列表 项 都 添加 一 张 上 下 文 沫 单 , 使 用 户 能 快速 进 
行 相关 的 操作 。 举 个 例子 ， 在 Apple Mail 里 ， 收 件 人 、 抄 送 和 秘密 抄 送 字段 里 的 列表 项 都 带 有 一 
个 上 下 文 菜单 ， 可 以 很 方便 地 复制 或 保存 邮箱 地 址 ， 从 列表 中 移 除 地 址 , 或 者 启动 一 个 与 此 人 的 
新 会 话 或 给 此 人 发 送 邮 件 。 

这 项 功能 没有 包括 在 我 们 的 插件 里 , 但 是 有 许多 jQuery 和 非 jQuery 的 插件 提供 了 各 种 方法 ， 
给 每 个 列表 项 都 绑 定 一 个 菜单 事件 行为 。 


18.4 ”使 用 列表 生成 器 脚本 


本 书 附带 的 列表 生成 器 演示 和 代码 ( www.filamentgroup.com/dwpe ) 包含 一 个 脚本 : 
jQuery.listbuilder.js。 它 不 但 具有 本 章 描 述 的 所 有 基本 功能 , 还 具有 支持 多 项 选择 的 键盘 行为 以 及 
用 Backspace 键 移 除 项 。 下 面 介 绍 如 何 使 用 这 个 脚本 。 

(1) 下 载 并 引用 jQuery 库 〈 1.3.1 或 之 后 的 版 本 ) 和 本 书 网 站 里 包含 的 脚本 (jQuery listbuilderjs )， 
以 及 在 线 演示 里 用 到 的 那些 CSS 文 件 与 图 像 。 

(2) 将 插件 指向 某 个 特定 的 textarea 或 文本 input ， 并 调用 listbuilder 方 法 : 

$( "textarea' ) .Listbuilder(); 


(3) 根据 个 人 喜好 设置 选项 。 这 个 插件 可 以 使 用 下 列 选项 进行 配置 。 
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做 delimChar: 用 于 将 textarea 内 容 拆 分 成 独立 条 目的 字符 或 字符 串 ， 比 如 一 个 逗号 或 者 换 
行 符 。 
P width: 列表 生成 器 容器 的 宽度 ， 默 认 是 它 所 取代 的 textarea 的 宽度 。 
做 completeChars : 一 个 用 来 创建 新 项 目的 键 码 数组 。 举 个 例子 ， 用 户 输入 某 个 单词 或 短语 
后 ， 他 们 可 以 按 下 逗号 或 回 车 键 来 添加 一 个 标签 。 键 码 的 完整 列表 可 以 在 Mozilla 
Developer Center 上 找到 ( http://t.cn/zR1Q9if )。 
攻 userDirections: 作为 title 属 性 应 用 到 新 input 上 的 指导 文字 。 默 认 的 指导 文字 是 “输入 
一 个 名 称 然 后 按 回 车 或 逗号 键 把 它 添加 到 列表 中 ”( Type a name and press enter or comma 
to add it to the list )。 
> labelReplacement: HTML 字 符 串 形式 的 一 个 新 标签 或 一 组 谍 套 标签 ， 用 于 替换 最 初 关 联 
到 textarea 上 的 label 元 素 ， 比 如 <h2 class="list-builder-heading"></h2>。 脚 本 会 抓 取 
label 的 内 容 并 把 它 插 入 指定 字符 串 的 最 内 层 标签 里 。 这 个 选项 有 一 个 很 好 的 示例 ， 可 以 
在 本 书 附带 代码 里 的 列表 生成 器 JavaScript 中 找到 。 
(4) 覆盖 任意 选项 的 默认 值 ， 具 体 做 法 是 给 listbuilder 方 法 传递 一 个 键 值 对 形式 的 对 象 : 
// 用 破 折 号 而 非 过 号 /换行 符 来 拆 分 文本 域 的 值 
$('textarea').listbuilder( {delimChar: '-'} ); 
这 个 列表 生成 器 插件 生成 的 元 素 和 类 都 与 本 章 介 绍 的 元 素 和 类 相 匹 配 。 可 以 使 用 本 书 网 站 里 
代码 范例 所 包含 的 CSS 文 件 ， 加 上 这 一 章 所 展示 的 设计 ， 把 它们 作为 一 个 起 点 来 构建 你 的 项 目 。 
列表 生成 器 提供 的 丰富 实例 展示 了 利用 X 光 方法 ,如 何 把 一 个 复杂 的 交互 组 件 映射 回 非 常 简 
单 的 HTML 元 素 ， 从 而 确保 对 所 有 设备 的 兼容 性 。 它 还 阐明 了 一 个 事实 ， 即 不 是 每 一 项 增强 功能 
( 比如 自动 完成 和 上 下 文 菜单 ) 都 需要 移植 到 基本 体验 里 才能 提供 完美 可 用 的 交互 性 。 
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随 着 各 个 网 站 纷纷 扩展 它们 的 内 容 分 享 和 协作 功能 ， 用 户 逐 渐 选 择 上 传 文件 (照片 、 视 频 、 
文档 ， 甚 至 安全 信息 ) 并 通过 基于 “ 云 ” 系 统 的 Web 应 用 程序 来 保存 它们 ， 而 不 是 本 地 储存 在 他 
们 自己 的 电脑 里 。 依 赖 浏 览 器 上 传 文件 的 常见 应 用 包括 Flickr 或 YouTube 等 照片 或 视频 分 享 网 站 ， 
Facebook 等 社交 网 站 ， 以 及 谷歌 文档 等 基于 Web 的 生产 效率 套件 。 

HTML 提 供 了 一 个 很 方便 的 原生 表单 控件 来 访问 本 地 文件 type 设置 为 file 的 标准 input 元 
素 。 这 个 文件 input 显 示 为 一 个 用 于 提供 反馈 的 文本 字段 和 一 个 按钮 。 这 个 按钮 会 启动 一 个 标准 
的 操作 系统 对 话 框 ， 代 ee 用 户 选 择 了 某 个 文件 后 ,所 选 文件 的 路 
径 就 会 填 人 文本 反馈 字 

nn 无 法 用 CSS 给 原生 的 文件 input 添 
加 样式 ， 而 文本 字段 和 按钮 的 外 观 与 尺寸 在 各 种 浏览 句 和 操作 系 双 0 (甚至 连 按 
钮 用 词 可 能 都 不 一 样 ) 如 图 19-1 所 示 。 最 重要 的 是 ， 大 多 数 浏 览 器 泻 染 出 的 固定 尺寸 文本 字段 通 
常 太 小 , 不 足以 显示 完整 的 文件 路 径 ， ee Eb 看 到 最 关键 的 用 户 反 
馈 信息 : 文件 名 (Mac 电脑 上 的 Safari 浏 览 器 是 一 个 值得 注意 的 例外 ， 它 会 展示 文件 名 , 但 不 会 显 
示 路 径 的 其 余部 分 )。 
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图 19-1 热门 浏览 器 和 平台 里 的 原生 文件 input 示 例 : IE 8 Windows (上 )， 
Firefox 3 Windows (中 ) 和 Safari 4Mac (下 ) 


在 很 多 情况 下 , 一 个 自 定义 设计 的 文件 输入 控件 在 网 站 或 应 用 程序 里 会 比 原生 的 控件 更 好 用 。 

> 在 一 些 网 站 里 ,文件 输入 控件 的 观感 必须 匹配 用 户 界面 设计 的 其 余部 分 ， 或 者 它 的 尺寸 
必须 加 以 控制 才能 纳入 某 个 特定 的 布局 里 。 

> 在 一 些 案 例 里 ,“ 浏 览 ”( Browse ) 或 “选择 文件 ”( Choose File ) 按钮 带 有 图 标 ， 或 者 需 
要 使 用 不 同 的 用 词 来 更 准确 地 融和 上下文 ( 比如 “选择 图 像 ” 或 者 “上传 个 人 资料 图 片 ”) 
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或 者 对 不 同 的 语言 提供 支持 。 
> 某 些 情况 下 ， 所 选 文件 的 反馈 信息 ( 包括 文件 名 ) 必须 可 见 , 或 者 带 有 有 自 定义 的 图 标 。 
> 在 一 些 案例 里 ， 用 户 能 够 上 传 多 个 文件 ， 此 时 显示 缩 上 略图、 文件 大 小 或 者 展示 上 传 过 程 
实时 反馈 信息 的 进度 条 就 很 有 帮助 。 
Flash 等 基于 插件 的 解决 方案 通常 用 来 创建 自 定义 的 文件 输入 控件 ， 前 面 讨论 过 ， 插 件 的 私 
有 本 质 决 定 了 它们 不 可 能 出 现在 所 有 平台 和 设备 上 。 因 此 ， 我 们 倾向 于 用 一 些 CSS 和 JavaScript 
来 增强 标准 的 HTML 文 件 input， 它 的 可 访问 性 要 广泛 得 多 。 
本 章 会 分 步 介绍 构建 自 定义 文件 输入 控件 的 过 程 ， 此 控件 借助 了 原生 的 input， 并 用 到 一 些 
创新 手法 。 我 们 会 在 这 一 章 的 最 后 讨论 一 些 更 为 复杂 的 情形 ， 比 如 并 列 多 个 文件 输入 控件 。 


19.1 X 光 透视 


我 们 给 某 个 社交 网 站 做 过 一 个 让 用 户 上 传 一 张 个 人 资料 照片 的 表单 。 这 个 表单 的 文件 输入 控 
件 是 自 定义 的 ， 以 匹配 网 站 的 整体 风格 ,如 图 19-2 所 示 。 





Profile image 
Choose photo 


Na file selected... Browse 


Upload photo 











图 19-2” 自 定义 的 文件 输入 控件 





和 原生 的 文件 输入 控件 一 样 , 用 户 点 击 “ 浏 览 ” 按 钮 时 , 会 显示 一 个 标准 的 操作 系统 对 话 框 ， 
如 图 19-3 所 示 。 
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19-3 点 击 “浏览 ”按钮 后 出 现 的 原生 浏览 器 对 话 和 
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在 我 们 的 目标 设计 里 ， 自 定义 input 会 显示 文件 的 名 称 和 一 个 用 于 标识 文件 类 型 的 图 标 。 另 
外 ， 把 按钮 文本 从 “浏览 ” 换 成 “更 改 ”( Change ), 虽然 只 是 一 个 很 小 的 变化 , 但 却 反 映 出 已 选 
择 茶 个 文件 这 一 事实 ， 如 图 19-4 所 示 。 








回 photo-I.png 
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19-4” 某 个 选中 文件 的 文件 名 和 图 标 反 馈 信 息 


用 X 光 “透视 ”这 个 设计 后 ， 为 这 个 元 素 选择 哪 种 基础 标记 就 很 明显 了 : HTML 里 上 传 文件 
的 唯一 标记 就 是 文件 input。 

但 是 ， 原 生 的 文件 input 无 法 通过 添加 样式 匹配 目标 设计 。 为 了 解决 这 个 问题 ， 我 们 会 隐藏 
这 个 原生 文件 input， 使 其 不 可 见 ， 然 后 在 它 的 位 置 上 生成 外 观 与 自 定 义 组 件 相 似 的 标记 。 只 要 
点 击 这 个 自 定义 组 件 ， 就 把 click 事 件 转移 到 原生 的 ijnput 上 ， 由 它 打开 操作 系统 的 “浏览 ”对 话 
框 : 本 质 上 是 “站 在 原生 控件 的 肩膀 上 ”打开 “浏览 ”对 话 框 。 

一 般 来 说 ,点 击 自 定 义 组 件 时 会 用 JavaScript 和 触发 原生 文件 input 的 click 事 件 。 但 是 ， 因 为 文 
件 input 直接 与 用 户 的 文件 系统 交互 ， 所 以 浏览 器 开发 者 内 建 了 保护 措施 ， 以 防止 黑客 利用 
JavaScript 触 发 的 click 事 件 ( 有 时 也 称 为 劫持 点 击 “hijacking click” 或 者 点 击 动 持 “click-jacking”)， 
所 以 需要 一 种 巧妙 的 变通 方法 。 

因为 无 法 用 程序 触发 原生 文件 input 的 click 事 件 ， 所 以 我 们 会 动态 定位 到 input 自 身 ， 确 保 
它 能 获得 真正 的 点 击 。 为 此 ， 我 们 会 使 原生 的 文件 input 变 得 透明 ， 并 将 它 直 接 定位 到 用 户 光 标 
和 自 定义 文件 input 之 间 。 用 CSS 把 原生 input 的 opacity 设 成 0， 使 它 不 可 见 但 仍 可 点 击 ( 使 用 
display:none 或 visibility:hidden 会 导致 它 实 际 上 不 存在 ， 因 而 无 法 点 击 )。 这 样 用 户 就 能 直接 
点 击 原生 的 文件 input， 虽 然 看 起 来 点 的 还 是 自 定义 文件 输入 控件 ， 如 图 19-5 所 示 。 





























































Choose photo 


No ftle selecter™ : | : - 
自 定义 文件 输入 控件 (透明 的 ) 原生 文件 输入 控件 


图 19-5 ”原生 文件 输入 控件 被 放 在 用 户 光 标 下方 ， 通 过 点 击 可 以 打开 浏览 对 话 杠 


这 样 的 做 的 优点 是 可 以 将 原生 文件 input 控 件 同时 用 于 基本 体验 和 增强 体验 ， 因 为 能 借助 它 
提供 的 所 有 功能 和 可 访问 性 ,而 自 定 义 文件 输入 控件 其 实 只 是 一 套 视 觉 反 馈 机 制 而 已 。 虽 然 原生 
input 不 可 见 , 但 它 仍然 可 以 通过 键盘 访问 , 因此 无 需 给 它 添加 任何 可 访问 性 功能 或 者 ARIA 属 性 。 
但 是 ， 我 们 会 给 自 定 义 组 件 添 加 一 个 ARIA 属 性 ， 证 它 对 屏幕 阅读 器 隐藏 ， 因 为 它 只 对 视力 正常 
的 用 户 有 用 。 
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使 用 原生 文件 input 的 基本 体验 是 完美 可 用 的 ， 如 图 19-6 所 示 。 
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Choose photo 





Browse. Upload phoro 


























图 19-6 ”图像 上 传 工具 的 基本 体验 


致谢 
这 种 方法 受到 了 Michael McGrady 和 Shaun Inman 所 做 工作 的 启发 ， 他 们 开发 了 一 些 复杂 的 
CSS 和 JavaScript 把 原生 文件 input 放 到 用 户 的 光标 下 面 ， 以 创建 自 定义 的 文件 输入 控件 。 
www.shauninman.com/archive/2007/09/10/styling file inputs with css and the dom 





Www.quirksmode.org/donyinputfile.html 


19.2 ”创建 自 定义 的 文件 输入 控件 


有 了 总 体 方案 之 后 , 接 下 来 我 们 看 一 看 用 于 基本 体验 的 基础 标记 , 然后 再 添加 标记 、 样式 和 
脚本 增强 信息 。 


19.2.1 基础 标记 和 样式 


基础 标记 是 一 个 type 属 性 为 file 的 标准 input: 

<input type="file" name="file" /> 

给 这 个 input 添 加 一 个 ID 以 关联 它 的 label， 同 时 作为 一 个 挂钩 〈 即 一 种 容易 找到 它 的 方式 ) 
提供 给 我 们 的 增强 脚本 : 


<label for="file">Choose photo</label> 
<input type="file" name="file" id="file" /> 


最 后 ， 用 一 个 form 标 签 围 住 这 段 标记 ， 并 添加 一 个 类 型 为 submit 的 标准 input 作 为 “上 传 昭 
片 ”( Upload Photo ) 按钮 ， 如 图 19-7 所 示 。 要 正确 提交 文件 输入 控件 的 数据 ，form 的 开头 标签 
必须 包含 method="post" 和 enctype="multi-part/form" 这 两 个 属性 ， 这 样 表单 才能 够 提交 二 进 制 
文件 : 


<form action="profilephoto.php" method="post" enctype="multipart/form-data"> 





















































Choose photo Browse ln (Upload phatp 














图 19-7 应 用 安全 样式 之 前 的 基本 体验 
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接 下 来 , 在 基本 样式 表 里 添加 安全 样式 ,输出 给 所 有 用 户 。 我 们 会 加 入 一 列 简单 的 字体 列表 
来 设置 网 页 的 默认 字体 ， 并 添加 一 条 规则 将 1abel 设 置 为 display: block， 使 它 位 于 文件 input 的 
上 面 ， 如 图 19-8 所 示 。 


body { font-family: "Segoe UI", Arial, sans-serif; } 
label { display:block; } 





Choose photo 





/Users/toddparker/Movies/ ( Browse.., ) ( ‘Upload photo } 














图 19-8 ”应 用 安全 样式 后 的 基本 体验 





19.2.2 ”增强 标记 和 样式 


建立 基础 标记 之 后 ， 接 下 来 编写 自 定义 的 增强 标记 和 样式 。 
首先 创建 一 个 容器 div 来 存放 自 定义 标记 ， 并 赋予 它 customfile 类 和 一 个 值 为 true 的 
aria-hidden 属 性 ( 稍 后 会 给 它 添加 样式 ， 将 它 作为 容纳 反馈 盒子 和 按钮 的 外 部 容器 ): 

<div class="customfile" aria-hidden="true"></div> 

给 这 个 容器 添加 两 个 span 元 素 : 第 一 个 用 于 显示 所 选 文件 的 图 标 和 文字 反馈 信息 , 第 二 个 会 
成 为 “浏览 ”按钮 。 默 认 情 况 下 ， 原 生 文件 input 是 空白 的 ， 因 此 初始 的 反馈 消息 是 “没有 选择 
文件 ……”(No file selected... )， 按 钮 的 标签 则 是 “浏览 ”: 


<div class="customfile" aria-hidden="true"> 

<span class="customfile-button">Browse</span> 

<span class="customfile-feedback">No file selected...</span> 
</div> 


给 外 部 容 需 应 用 深 灰 的 背景 色 、 边 框 和 内 边 距 样式 ， 并 用 CSS3 的 border-radius 属 性 来 圆 化 
边 角 。 同 时 设置 cursor:pointer 属 性 ， 以 便 用 户 看 到 手 形 图 标 ， 表 示 可 以 点 击 : 


.customfile { 
width: 400px; 
background: #666; 
cursor: pointer; 
overflow: auto; 
padding: 2px; 
border: 1px solid #444; 
-moz-border-radius:7px; 
-webkit-border-radius:7px; 
border-radius:7px; 


} 
还 要 让 “浏览 ”按钮 浮动 到 反馈 盒子 的 右 侧 ， 并 给 它 添加 渐变 背景 图 像 和 圆 化 边 角 : 


.customfile-button { 
border: 1px solid #999; 
background: #333 url(../images/bg-submit.gif) bottom repeat-x; 
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color: #fff; 
font-weight: bold; 
float: right; 

width: 50px; 

padding: .3em .6em; 
text-align: center; 
text-decoration: none; 
font-size: 1.2em; 
-moz-border-radius:5px; 
-webkit-border-radius:5px; 
border-radius:5px; 


} 
空白 状态 〈 用 户 选择 文件 之 前 ) 的 初始 反馈 文字 为 斜体 ， 如 图 19-9 所 示 。 


.customfile-feedback { 
display: block; 
margin: 1px 1px 1px 5px; 
font-size: 1.2em; 
color: #fff; 
font-style: italic; 
padding: .3em .6em; 


No file selected... Browse 


图 19-9 ”没有 选择 文件 时 的 增强 体验 


为 了 在 用 户 把 鼠标 悬 停 于 按钮 上 或 用 键盘 使 input 获 得 焦点 时 提供 视觉 反馈 ， 再 创建 一 条 通 
用 样式 规则 来 装饰 悬 停 和 焦点 状态 ， 然 后 添加 一 条 点 状 轮廓 线 作 为 对 通过 键盘 获得 焦点 的 反馈 ， 
如 图 19-10 所 示 。 


.Customfile-hover .customfile-button, 
.customfile-focus .customfile-button { 
Color:#111; 
background: #aaa url(../images/bg-btn.png) bottom repeat-x; 
border-color:#aaa; 
padding: .3em .6em; 





.customfile-focus .customfile-button { 
outline: 1px dotted #ccc; 


} 


Na file selected... 





图 19-10 通过 键盘 获得 焦点 的 反馈 示例 : 按钮 的 样式 类 似 悬 停 状 
态 , 但 多 了 一 条 点 状 的 轮廓 线 


选择 某 个 文件 后 ,脚本 会 给 反馈 盒子 再 添加 一 个 customfile-feedback-populated 类 ， 它 覆盖 
了 之 前 的 一 些 样 式 ， 加 粗 反 馈 文字 并 添加 了 一 个 文件 图 标 背 景 ， 如 图 19-11 所 示 。 
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.Customfile-feedback-populated { 
color: #fff; 
font-style: normal; 
font-weight: bold; 
padding-left: 20px; 
background: url(../images/icon-generic.gif) left 4px no-repeat; 


} 


目 | intro.shtml 








图 19-11 带 有 通用 文件 图 标的 文件 反馈 信息 


默认 情况 下 , 我 们 会 设置 一 个 通用 的 文件 背景 图 标 , 如 果 脚 本 识别 出 一 个 更 加 具体 的 文件 类 
型 ， 则 样式 表 会 用 对 应 的 图 标 覆 盖 这 个 通用 图 标 。 为 了 更 新 图 标 ， 脚 本 会 解析 所 选 文件 的 文件 名 
来 寻找 它 的 扩展 名 ， 然 后 给 反馈 盒子 动态 添加 一 个 此 扩展 名 所 对 应 的 类 。 举 个 例子 ， 一 个 名 为 
photo.png 的 文件 会 被 赋予 class="png"。 在 增强 样式 表 里 ， 这 些 类 所 包含 的 样式 规则 会 指向 独 一 
无 二 的 背景 图 像 。 

如 果 想 让 一 个 图 标 代表 多 种 文件 类 型 ， 可 以 组 合 这 些 类 选择 器 (PNG ，JPG， 等 等 )， 让 它 
们 共用 一 条 样式 规则 。 这 里 设置 了 4 个 常见 的 图 像 扩展 名 使 用 同一 个 图 标 。 因 为 我 们 的 界面 关注 
的 是 选择 一 张 照片 ， 所 以 这 些 是 我 们 首先 要 接受 的 扩展 名 ， 如 图 19-12 所 示 。 


“jpg, -gif, .png, .jpeg, .bmp { 
background-image: url(../images/icon-image.gif); 


} 
回 photo-1.png Change 


图 19-12 ”图 像 的 图 标 反馈 


我 们 会 把 原 有 文件 input 的 opacity 设 置 为 0， 使 它 在 大 多 数 现代 浏览 器 里 不 可 见 〈 后 面 会 纺 
写 用 于 Internet Explorer 6 的 透明 度 脚本 )。 用 户 把 鼠标 悬 停 在 自 定 义 input 上 时 ， 脚 本 会 先 把 原生 
的 文件 input 附 加 到 body 的 末尾 ， 然 后 再 显示 它 ， 以 确保 将 它 正 确 放 到 相对 于 窗口 的 鼠标 坐标 上 。 
把 这 个 input 的 z-index 设置 成 99999， 确 保 它 会 被 放 在 自 定义 input 的 上 方 ( 不信 其 他 网 页 元 素 的 
z-index 会 大 过 它 ): 
.Customfile-nativeinput { 
position: absolute; 
cursor: pointer; 
opacity: 0; 
z-index: 99999; 

} 


最 后 ， 给 基础 标记 里 原 有 的 1abel 添 加 样式 来 匹配 我 们 的 目标 设计 ， 因 为 在 增强 体验 里 它 在 
页 面 上 仍然 可 见 : 
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label { 
font-size: 1.4em; 
display: block; 
margin: .5em 10px .5em 0; 


19.2.3” 自 定义 文件 输入 控件 的 脚本 


调用 增强 脚本 时 要 做 的 第 一 件 事 ， 就 是 给 原生 ;input 添加 customfilen-ativeinput 类 ， 以 便 给 它 
应 用 样式 。 我 们 还 会 用 jQuery 的 css 方 法 让 这 个 元 素 在 Internet Explorer 上 不 可 见 〈Internet Explorer 6 
不 文 持 CSS 的 opacity 属 性 ， 因 此 jQuery 会 自动 应 用 正 专 有 的 filter 属 性 达到 同样 的 目的 小 
var fileInput = $('#file') 
// 添加 用 于 CSS 的 类 


.addClass('customfile-nativeinput') 

















// 用 jQuery 的 opacity 方 法 在 视觉 上 隐藏 这 个 元 素 
.Css('opacity' ,0); 


接 下 来 , 生成 增强 标记 : 容器 div 和 两 个 span 元 素 , 并 把 它们 添加 到 网 页 里 的 原生 input 之 后 。 
这 个 自 定义 文件 输入 控件 默认 是 空白 的 (不 带 任何 值 )， 因 此 它 会 包含 No file selected...(“ 没 有 选 


// 创建 自 定义 控件 的 容器 


var upload = $('<div class="customfile" aria-hidden="true"></div>'); 
// 创建 自 定义 控件 的 按钮 

var uploadButton = $('<span class="customfile-button">Browse</span>'). 
appendTo(upload); 

// 创建 自 定义 控件 的 反馈 

var uploadFeedback = $('<span class="customfile-feedback">No file 





selected...</span>').appendTo(upload); 


// 把 增强 标记 插入 到 原生 文件 输入 控件 之 后 
upload.insertAfter(fileInput); 


为 了 把 原生 ;input 放 在 用 户 光 标的 下 方 , 脚 本 会 绑 定 mousemove 事 件 来 探测 鼠标 何 时 位 于 自 定 
义 文 件 输 入 控件 之 上 。 然 后 会 动态 重 定位 原生 input 左 上 角 屏 幕 坐 标 ， 把 它 放 在 用 户 光 标 和 自 定 
义 input 中 间 。 用 户 点 击 自 定 义 input 的 按钮 时 , 他 们 点 击 的 实际 上 是 不 可 见 的 原生 文件 input 里 的 
按钮 ， 进 而 打开 浏览 对 话 框 : 


// 在 mousemove 时 保持 原生 的 input 在 光标 下 方 以 捕捉 点 击 
upload.mousemove(function(e){ 
fileInput.css({ 








// 定位 到 光标 *Y* 坐 标 之 上 3 px 
top: e.pageY - 3， 





// 定位 到 光标 *X* 坐 标 右 侧 20 px 


19.2 ”创建 自 定 义 的 文件 输入 控件 303 





left: e.pageX - fileInput.outerWidth() + 20 

要 确保 这 里 的 x 和 y 重 定位 在 所 有 浏览 器 和 布局 里 都 没 问 题 ， 关 键 是 要 让 原生 的 input 始 终 相 
对 于 文档 的 body 进行 定 位 。 脚 本 对 此 功能 的 实现 方法 ,是 在 光标 悬 停 到 自 定义 控件 上 时 ， 把 原生 
input 放 到 HTML 文档 的 末尾。 用户 把 鼠标 移动 到 自 定 义 控件 上 并 触发 mouseover 事 件 时 ， 把 原生 
input 的 附加 到 body 标 签 的 未 尾 (用 appendTo 方 法 )。 用 户 把 鼠标 移出 自 定 义 input 会 触发 mouseout 
事件 , 再 用 insertBefore 方 法 把 原生 文件 input 放 回 它 在 HTML 源 代码 里 的 初始 位 置 ， 即 自 定义 代 
码 之 前 : 
































upload 

// 在 mouseover 时 把 原生 文件 输入 控件 移 到 body 未 尾 

.mouseover(function(){ 
fileInput.appendTo( "body ' ); 

}) 

// 在 mouseout 时 把 原生 文件 输入 控件 移 回 原来 的 位 置 

.mouseout(function(){ 
fileInput.insertBefore(upload); 


现在 ， 用 户 点 击 按钮 时 ， 原 生 的 input 会 像 往常 一 样 打开 操作 系统 的 浏览 对 话 框 ， 脚 本 什么 
也 不 用 管 。 

为 了 复制 原生 ;input 的 悬 停 和 聚焦 状态 ， 要 修改 脚本 来 探测 用 户 何 时 聚焦 或 悬 停 于 原生 的 
input 上 ， 然 后 用 程序 给 自 定义 控件 添加 一 个 hoverz 类 ， 以 便 通 过 它 给 悬 停 状态 添加 样式 。 当 用 户 
把 鼠标 移出 原生 input 并 触发 blur 事 件 时 , 还 要 移 除 hover 类 , 让 自 定义 input 的 按钮 恢复 原来 的 样 
式 。 类 似 地 ， 当 用 户 用 Tab 键 在 网 页 上 切换 时 ， 要 检测 原生 input 何 时 获得 焦点 ， 然 后 添加 























fileInput 
// 在 mouseoveT 时 添加 和 鼠标 悬 停 类 
.mouseover(function(){ 
upload.addClass('customfile-hover'); 
}) 


// 在 mouseout 时 移 除 鼠标 悬 停 类 
.mouseout(function(){ 

upload.removeClass('customfile-hover'); 
}) 


// 在 focus 时 添加 键盘 聚焦 类 
.focus(function(){ 

upload.addClass('customfile-focus'); 
}) 


// 在 blur 时 移 除 键盘 聚焦 类 
.blur(function(){ 
upload.removeClass('customfile-focus'); 
}) 


还 需要 给 自 定义 控件 的 反馈 盒子 添加 文件 名 和 图 标 。 用 户 在 浏览 对 话 框 里 选择 某 个 文件 后 ， 
我 们 要 从 原生 input 触 发 的 change 事 件 中 解析 出 它 的 新 值 。 使 用 正则 表达 式 能 从 完整 的 路 径 里 提 
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取出 文件 名 以 更 新 反馈 文字 ， 然 后 根据 扩展 名 生成 恰当 的 图 标 class， 添 加 customfile-fee 





populated 类 来 切换 反馈 区 域 的 样式 ， 并 让 自 定义 文件 输入 控件 的 按钮 显示 出 “更 改 ” 字 样 : 


fileInput 
.Change(function(){ 
// 路 径 里 最 后 一 个 反 针 杠 之 后 的 文本 就 是 文件 名 
var fileName = $(this).val().split(/\\/).pop(); 
// 路 径 里 最 后 一 个 句号 之 后 的 文本 就 是 扩展 名 
Var fileExt = 'customfile-ext-' + 
fileName.split('.').pop().toLowerCase(); 


// 更 新 反馈 信息 

uploadFeedback 
// 给 容器 添加 类 来 展示 反馈 信息 已 生成 的 状态 
.addClass( "customfile-feedback-populated ' ); 


// 将 反馈 文字 设置 为 文件 名 
.text(fileName) 


// 添加 文件 扩展 名 类 
.addClass(fileExt) 
// 更 改 按 钮 的 文本 
uploadButton. text('Change' ); 
}); 


dback- 





最 后 ， 自 定义 文件 输入 控件 应 该 具有 原生 input 的 所 有 功能 ， 包 括 能 用 编程 的 方式 禁用 它 。 
如 果 有 必要 阻止 用 户 与 自 定义 文件 输入 控件 交互 ， 那 么 可 以 给 原生 input 添 加 disabled="disabled" 





























何 处 理 自 定义 控件 禁用 问题 。) 
19.3 ”使 用 自 定义 文件 输入 控件 脚本 


属性 ， 同 时 给 自 定义 控件 提供 一 种 视觉 样式 ,使 其 看 上 去 处 于 禁用 状态 。( 第 17 童 详细 介绍 了 如 


本 书 附带 的 自 定 义 文件 输入 控件 演示 和 代码 (可 以 在 本 书 的 网 站 上 找到 : www.filamentgroup. 
com/dwpe ) 引用 了 一 个 脚本 : jQuery.fileinput.js。 它 能 用 本 章 描 述 的 原则 自动 创建 自 定义 文件 输 





入 控件 。 


要 在 你 的 网 页 里 使 用 这 个 脚本 , 请 下 载 并 引用 演示 页 里 列 出 的 那些 文件 , 然后 对 网 页 里 你 想 





转变 成 自 定义 文件 输入 控件 的 原生 文件 input 调 用 customFileInput(): 


// 把 一 个 ID 为 "file" 的 input 转 换 成 自 定 义 文 件 输入 控件 
$("'input#file').customFileInput(); 


如 果 要 定制 网 页 里 所 有 的 文件 input， 可 以 修改 选择 骨 : 


// 转 换 type 属 性 为 "file" 的 所 有 input 
$('input[type=file]').customFileInput(); 


在 这 个 案例 里 ， 安 全 限制 让 我 们 别 无 选择 ， 只 能 使 用 原生 的 文件 input。 这 一 章 很 好 ] 

















地 说 明 














了 如 何在 增强 体验 过 程 中 创造 性 地 重复 使 用 来 自 基础 标记 的 原生 元 素 , 而 不 是 用 JavaScrip 全 














功能 。 这 不 仅 简化 了 编程 工作 ， 还 让 我 们 能 够 利用 原生 元 素 的 可 访问 性 功能 。 














攻 
4 造 其 
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HTML5 有 更 完善 的 文件 上 传 机 制 
HTML5 工 作 组 已 经 编写 了 许多 规范 ， 在 它们 获得 浏览 器 支持 后 就 能 提供 更 多 用 于 文件 输 
入 和 上 传 的 原生 特性 与 功能 。 这 些 规范 包含 了 一 个 新 的 File API 来 提供 许多 标准 的 实现 方法 ， 
否则 这 些 功 能 只 能 通过 Adobe Flash 或 Sun Java 等 私有 插件 才能 实现 .HTML5 里 一 些 值 得 注意 的 
文件 上 传 功能 包括 下 面 这 些 。 
也 文件 拖 放 选择 : 随 着 Web 应 用 程序 变 得 越 来 越 无 终 融 入 桌面 环境 ,用 户 期 望 有 朝 一 日 能 
够 把 文件 从 操作 系统 窗口 拖 动 到 浏览 器 里 实现 上 传 , 这 项 功能 通常 会 在 照片 打印 等 网 站 
上 提供 ， 因 为 用 户 必须 上 传 照片 才能 下 单打 印 。HTML5 的 dataTransfer 和 dragEvent 接 
口 提供 了 原生 实现 这 一 功能 的 标准 。 
戎 跟踪 上 传 进度 : 接受 文件 上 传 的 Web 应 用 程序 有 时 会 提供 进度 指示 器 来 告知 用 户 最 新 的 
上 传 状态 。 这 一 功能 以 前 通常 都 交 给 Flash 处 理 ， 因 为 大 多 数 浏览 器 不 提供 有 关上 传 进 
度 的 信息 。HTML5 规 范 已 经 草拟 了 一 份 跟踪 上 传 进度 的 事件 建议 ( 包括 onloadstart 和 
loadprogress 事 件 )， 它 们 让 反馈 信息 在 不 使 用 私有 插件 的 情况 下 成 为 可 能 。 
也 用 单个 input 上 传 多 个 文件 : HTML5 规 范 描述 了 原生 文件 输入 元 素 的 一 个 新 属性 : 
multiple。 它 允许 用 户 在 一 个 原生 操作 系统 浏览 对 话 框 里 选择 多 个 文件 。 
这 些 功 能 很 快 就 可 以 在 浏览 器 里 原生 使 用 了 。 写作 本 书 时 ，Firefox 3.5 已 经 为 大 量 HTML5 
的 文件 API 提 供 了 强 有 力 的 支持 。 





放眼 未 来 





普遍 可 访问 不 仅 是 一 个 值得 追求 的 目标 , 使 用 测试 驱动 的 渐进 增强 方法 时 , 它 也 是 一 个 能 达 
到 的 目标 。 

我 们 相信 渐进 增强 会 快速 成 为 所 有 Web 开发 的 新 准则 。 互联 网 的 功能 越 来 越 强大 , 基于 Web 
的 新 设备 不 断 涌现 , 随 之 而 来 的 就 是 对 在 所 有 这 些 设备 上 使 用 新 功能 的 期 待 。 于 是 , 对 可 访问 性 、 
移动 设备 支持 和 广泛 浏览 器 兼容 性 的 考量 不 再 是 一 项 “可 做 可 不 做 的 工作 ”。 

渐进 增强 ( 更 具体 地 说 是 测试 驱动 的 、 把 可 访问 性 纳入 考虑 范围 的 渐进 增强 ) 是 唯一 能 应 对 
千变万化 的 用 户 需 求 和 设备 的 现实 方法 。 另 外 , 渐进 增强 还 是 一 种 面向 未 来 的 方法 ， 它 天 生 能 够 
在 所 有 采用 Web 标准 的 新 版 浏览 器 和 设备 上 工作 。 

我 们 很 高 兴 地 看 到 ， 许 多 流行 的 JavaScript 库 正 开 始 接受 渐进 增强 和 可 访问 性 。 随 着 普及 率 
的 提升 ， 它 们 的 开发 者 社区 会 创建 出 更 多 的 预制 插件 ， 让 开发 工作 变 得 更 加 轻松 。 举 个 例子 ， 
jQuery UI 团队 正在 把 本 书 里 描述 的 许多 渐进 增强 技巧 移植 到 即将 发 布 的 插件 里 ， 并 且 致力 于 在 
不 和 久 的 将 来 完整 支持 ARIA。 

我 们 还 期 待 未 来 有 更 多 的 HTML5 和 CSS3 特性 会 得 到 广泛 支持 ， 使 我 们 能 用 更 少 的 
JavaScript 和 更 简洁 的 语义 创建 出 更 加 强大 的 体验 。 让 人 高 兴 的 是 ,这 一 天 到 来 时 ，EnhanceJS 测 
试 套件 的 可 定制 性 会 让 它 随 需 应 变 , 让 我 们 能 够 测试 这 些 新 功能 并 输出 到 能 够 处 理 它 们 的 浏览 
上 ， 同 时 仍然 照顾 到 所 有 的 传统 浏览 器 ， 向 它们 提供 到 处 都 能 用 的 基本 体验 。 

对 于 今天 的 项 目 , 本 书 介绍 的 核心 工具 和 技巧 会 让 在 设计 和 开发 过 程 中 满怀 信心 地 采用 渐进 
增强 方法 。X 光 透视 、 最 佳 编程 实践 、 能 力 测 试 脚本 和 本 书 附带 的 预制 组 件 插件 ， 能 够 确保 你 的 
项 目 服务 于 每 一 个 人 。 
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渐进 增强 的 Web 设 计 


“本 书 通俗 易 懂 ， 示 例 网 站 和 代码 简直 太 棒 了 ! 渐进 增强 方法 适合 每 个 网 站 设计 和 开发 人 员 使 用 。” 
一 一 Amazon 读 者 评论 


渐进 增强 是 一 种 Web 开 发 方式 ， 致 力 于 向 最 广大 的 潜在 受众 提供 尽 可 能 最 优 的 体验 ， 同 时 让 编程 和 测试 
工作 得 到 简化 。 无 论 用 户 是 在 iPhone 上 ， 还 是 在 最 新 最 潮 的 高 端 系统 上 浏览 网 站 ， 甚 至 只 是 听 着 屏幕 阅读 器 
的 朗读 ， 他 们 获得 的 体验 都 应 该 是 一 致 的 ， 功 能 和 特性 也 要 尽 可 能 完整 。 


本 书 由 全 球 著名 Web 设 计 公 司 Filament 集 团 两 位 创始 人 和 两 位 开发 主力 联手 打造 ， 其 中 Scott Jehl 还 是 
jQuery 团队 成 员 。 四 位 作者 具有 多 年 的 网 站 设计 和 开发 经 验 ， 曾 为 网 站 、 无 线 设 备 、Web 应 用 设计 过 众多 高 
度 实用 的 用 户 界 面 ， 受 到 了 高 度 赞 扬 。 本 书展 示 了 如 何 利用 渐进 增强 方法 开发 网 站 ， 从 而 获得 最 佳 用 户 体 
验 。 本 书 既 是 理解 渐进 增强 原则 和 益处 的 实用 指南 ， 也 是 详细 的 案例 分 析 ， 目 的 是 向 设计 师 以 及 开发 人 员 传 
授 何 时 、 何 地 以 及 如 何 采 用 体现 渐进 增强 的 具体 编程 和 脚本 技巧 。 


@ 常规 的 编程 方法 忽视 了 用 户 的 实际 需要 ， 渐 进 增强 提供 更 高 的 包容 性 和 可 访问 性 

@ 分 析 复 杂 的 界面 设计 ， 找 出 能 普遍 工作 的 潜在 语义 化 HTML 体 验 ， 然 后 安全 地 番 加 上 高 级 增强 信息 
@ 独一无二 的 浏览 器 能 力 测 试 套件 EnhanceJS ， 能 帮 你 只 将 增强 信息 发 送 给 有 处 理 能 力 的 设备 

@@ 组 合 HTML、CSS 和 JavaScript 来 实现 渐进 增强 的 最 佳 实践 ，HTML5 和 CSS3 的 具体 应 用 实例 

@ 支持 WAI-ARIA 和 键盘 操作 

全 更 多 极 具 诱惑 力 的 实战 细节 
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到 灵 社 区 


最 前 沿 的 IT 类 电子 书 发 售 平台 

























































































































































































































































































































































































子 出 版 的 时 代 已 经 来 临 。 在 许多 出 版 办 同行 还 在 狂 习 灵 社区 进一步 把 传统 出 版 流程 与 电子 书 出 版 业务 
瑰 仿 特 的 时 候 ， 图 灵 社 区 已 经 采取 实际 行动 拥抱 这 个 。 紧密 结合 ， 目 前 已 实现 作 译 者 网 上 交 稿 、 编 辑 网 上 
出 版 业 巨 变 。 作 为 国内 第 一 家 发 售 电子 图 书 的 IT 类 出 审 稿 、 按 章 发 布 的 电子 出 版 模式 。 这 种 新 的 出 版 模 
版 商 ， 图 灵 社 区 目前 为 读者 提供 两 种 DRM-free 的 阅读 式 ， 我 们 称 之 为 “敏捷 出 版 ”， 它 可 以 让 读者 以 较 
体验 : 在 线 阅读 和 PDF。 快 的 速度 了 解 到 国外 最 新 技术 图 书 的 内 容 ， 弥 补 以 

往 翻 译 版 技术 书 “ 出 版 即 过 时 ”的 缺憾 。 同 时 ， 敏 
a Re a 
布 尖 ， 更 新 容易 ， 而 且 凡 能 洒 省 了 彩色 图 片 《 凶 使。 提前 消灭 书稿 中 的 错误 ， 最 大 程度 地 保证 图 书 出 版 
















































































的 书 纸 质 版 是 黑白 印刷 的 ) 。 读 者 还 可 以 方便 地 进 
行 搜索 、 剪 贴 、 复 制 和 打印 。 

















最 方便 的 开放 出 版 平台 最 直接 的 读者 交流 平台 

































































































































































































































































































































































图 灵 社 区 向 读者 开放 在 线 写作 功能 ， 协 助 你 实现 自 出 在 图 灵 社 区 ， 你 可 以 十 分 方便 地 写作 文章 、 提 交 勘 
版 和 开源 出 版 的 梦想 。 利 用 “合集 ”功能 ， 你 就 能 联 误 、 发 表 评 论 ， 以 各 种 方式 与 作 译 者 、 编 辑 人 员 和 
合 二 三 好 友 共 同 创作 一 部 技术 参考 书 ， 以 免费 或 收费 其 他 读者 进行 交流 互动 。 提 交 勘 误 还 能 够 获 赠 社区 
的 形式 提供 给 读者 。 (收费 形式 须 经 过 图 灵 社 区 立项 银子 。 

评审 。) 这 极 大 地 降低 了 出 版 的 门槛 。 只 要 你 有 写作 

的 意愿 ， 图 灵 社 区 就 能 帮助 你 实现 这 个 梦想 。 成 熟 的 你 可 以 积极 参与 社区 经 常 开展 的 访谈 、 和 审读、 评选 
书稿 ， 有 机 会 入 选 出 版 计划 ， 同 时 出 版 纸 质 书 。 等 多 种 活动 ， 阅 取 积分 和 银子 ， 积 累 个 人 声望。 
图 灵 社 区 引进 出 版 的 外 文 图 书 ， 都 将 在 立项 后 马上 在 

社区 公布 。 如 果 你 有 意 翻 译 哪 本 图 书 ， 欢 迎 你 来 社区 

申请 。 只 要 你 通过 试 译 的 考验 ， 即 可 签约 成 为 图 灵 的 

译 者 。 当 然 ， 要 想 成 功 地 完成 一 本 书 的 翻译 工作 ， 是 








需要 有 坚强 的 妆 力 的 。 














